2016-05-17 4 views
1

は、私は以下のコードの私の作品があります。私はFirefoxやChromeでこのコードを実行すると表示のiframe Firefoxの左側のスクロールバーとクロム

<!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> 

を、私は左側のiframeのスクロールバーを見ることができませんでしたそれは常にiframeの右側にとどまります。しかし、IEでは完全に動作します。

これにはCSSまたはJSソリューションがあるかどうかを知りたいと思います。

+0

http://stackoverflow.com/questions/7347532/how-to-position-a-div-scrollbar-on-the-left-hand-side –

+0

@ Rachel ..私の質問はiFrameで、divではありませんでした部門内あなたが与えたリンクに記載されているCSSを試しましたが、残念ながらそれらのどれも私のために働いていませんでした。 – TheGaME

答えて

1

Et voila!ここでは、左

のスクロールとスクロールのiframeは、HTMLのdirタグが保持しているとき、我々はChromeの左側の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>

+0

ジョージア州アテネに行く場合のために、REMの事務所がどこにあるかを知っている;) –

0

基本的にはフィドルです"rtl"値。私はちょうどこのlinkの答えを見つけました。

Firefoxの場合、これはChromeブラウザと同じで、答えはlinkです。

関連する問題