iframe - 垂直滾動只有

我需要一個跨瀏覽器的解決方案來確保只有垂直滾動條可見，而不管iframe內容的寬度如何。

我的解決方案已經有了對jQuery的依賴，所以如果這隻用CSS是不可能的，那我可以使用jQuery解決方案。

我該怎麼做？

2011-04-07 smartcaveman

爲了僅顯示iframe中的垂直滾動條，您需要指定iframe的寬度大於頁面在iframe中的寬度。

<iframe src="#" width="--" height="250"> 
    <p>Your browser does not support iframes.</p> 
</iframe>

或者試試這個：

<style> 
    #scroll-box { 
     background:#e6e6e6; 
     width:150px; 
     height: 150px; 
     padding:15px; 
     overflow-y: scroll 
    } 
</style> 

<iframe id="scroll-box"> 
    <h3>Lorem ipsum dolor sit amet</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> 
</iframe>

來源

2011-04-07 21:17:03 mgreen

偉大的解決方案來覆蓋滾動屬性，並防止水平欄。但是，當內容適合時，它會顯示灰色的滾動條。 – stuartdotnet 2012-09-05 00:05:23

可以調整的iframe或與以下CSS代碼的任何元素的滾動條：

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }

來源

2012-06-15 20:32:48

使用overflow-x：允許我將iframe和內容保留在所有流體中。好答案。 – Chris 2013-03-13 20:51:56

Chrome瀏覽器無法通過src屬性加載外部iFrame – 2013-08-12 00:54:15

嵌套...

把<div>在內加載的頁面上，您可以控制滾動條。

<iframe scrolling="no" height="400" width="600" > 
<div id="addcontent" style='width:600px;overflow-y:scroll;overflow-x:hidden;height:400px;position:relative;top:0px;left:0px;'> 
</div> 
</iframe>

來源

2013-09-15 05:16:21

這對我的作品（甚至在Safari瀏覽器太）：

<iframe src="http://url/file.html" frameborder="0" style="overflow-y:scroll !important; overflow-x:hidden !important; overflow:hidden;height:100%;width:100%;" scrolling="yes"></iframe>

或者，你也可以這樣做：

CSS

iframe { 
    overflow-y:scroll !important; 
    overflow-x:hidden !important; 
    overflow:hidden; 
    height:100%; /* optional */ 
    width:100%; /* optional */ 
    border:none; /* optional */ 
}

HTML

<iframe src="http://url/file.html" scrolling="yes"></iframe>

* src（http://url/file.html），需要指向一個有效的URL和HTML文件。

來源

2015-04-01 11:39:07 sputn1k

iframe - 垂直滾動只有

回答

相關問題