在firefox和chrome中的左侧显示iframe滚动条

Show iframe scrollbar on left side in firefox and chrome

本文关键字：显示 iframe 滚动条 firefox chrome      更新时间：2023-09-26

我的代码如下：

<!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解决方案。

Et瞧！可滚动的iframe，滚动在左侧上

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

$( ".main" ).wrap( "<div class='scroll'></div>" );
div.main {
     height:150px!important;
     float:left;
     direction: ltr;
    
}
.scroll {
      unicode-bidi:bidi-override;
      direction: rtl;
      overflow-y: scroll;
      overflow-x:hidden;
}
.inside{
}
<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>

基本上，当html dir标记包含"rtl"值时，我们不能在chrome中的左侧显示Iframe滚动条。我刚刚在这个链接中找到了答案。

对于Firefox来说，它和chrome浏览器一样，答案就在这个链接中。

相关文章：