我有一个 iframe。
我需要一种跨浏览器的解决方案,以确保只显示垂直滚动条,而不管 iframe 内容的宽度如何。
我的解决方案已经依赖于 jQuery,因此,如果无法仅使用 CSS 实现此目标,我也可以接受 jQuery 解决方案。
我该怎么做?
我有一个 iframe。
我需要一种跨浏览器的解决方案,以确保只显示垂直滚动条,而不管 iframe 内容的宽度如何。
我的解决方案已经依赖于 jQuery,因此,如果无法仅使用 CSS 实现此目标,我也可以接受 jQuery 解决方案。
我该怎么做?
iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }
<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>
嵌套...
将<div>
放入在<iframe>
中加载的页面中,您可以控制滚动。
<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>
<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 */
}
<iframe src="http://url/file.html" scrolling="yes"></iframe>
*src (http://url/file.html)需要指向有效的URL和HTML文件。