Question

我的代码如下：

<!DOCTYPE html>
<html>
 <body>
  <div id="parentDiv" style="border:1px solid blue;" dir="rtl">
   <iframe src="http://www.w3schools.com" height="500" width="700">
    <p>Your browser does not support iframes.</p>
   </iframe>
  </div>
 </body>
</html>

当我在Firefox或Chrome中运行此代码时，我无法在左侧看到iframe滚动条，因为它始终位于iframe的右侧。但是，在IE中它可以很好地工作。

我想知道是否有任何CSS或JS解决方案。

Answer 1

瞧瞧！带有左侧滚动的可滚动iframe

这是一个小提琴https://jsfiddle.net/RachGal/s3z17cLw/

＆＃13;

$( ".main" ).wrap( "<div class='scroll'></div>" );

＆＃13;

div.main {
     height:150px!important;
     float:left;
     direction: ltr;
    
}
.scroll {
      unicode-bidi:bidi-override;
      direction: rtl;
      overflow-y: scroll;
      overflow-x:hidden;
}
.inside{
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main" ><iframe class="inside" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.3312622412445!2d-83.37737678492407!3d33.958324180631536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f66cdecc8d0783%3A0x4f152e9d93fa5d6!2s170+College+Ave%2C+Athens%2C+GA+30601%2C+USA!5e0!3m2!1sen!2sie!4v1464026910465" height="300" frameborder="0" style="border:0">
</iframe>
</div>

＆＃13;

Answer 2

基本上，当html dir标记包含＆＃34; rtl＆＃34;时，我们无法在chrome的左侧显示iframe滚动条。值。我刚刚在link找到答案。

对于Firefox，它与chrome浏览器相同，答案在于link。

在Firefox和Chrome

2 个答案: