CSS iframe - 仅垂直滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5586058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe - Vertical Scrolling Only
提问by smartcaveman
I have an iframe.
我有一个 iframe。
I need a cross-browser solution to ensure that only the vertical scrollbar is visible, regardless of the width of the iframe's contents.
我需要一个跨浏览器的解决方案来确保只有垂直滚动条是可见的，而不管 iframe 内容的宽度如何。
My solution already has a dependency on jQuery, so if this is not possible with only CSS I am open to jQuery solutions.
我的解决方案已经依赖于 jQuery，所以如果仅使用 CSS 无法做到这一点，我对 jQuery 解决方案持开放态度。
How can I do this?
我怎样才能做到这一点？
回答by HasanG
You can adjust scrollbars of an iframe or any element with following css code:
您可以使用以下 css 代码调整 iframe 或任何元素的滚动条：
iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }
回答by mgreen
In order to show only the vertical scrollbar in an iframe, you specify the width of the iframe to be greater than the page's width inside the iframe.
为了在 iframe 中仅显示垂直滚动条，您指定 iframe 的宽度大于 iframe 内的页面宽度。
<iframe src="#" width="--" height="250">
<p>Your browser does not support iframes.</p>
</iframe>
Or try this:
或者试试这个：
<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>
回答by Gary Hayes
Nesting...
嵌套...
Put the <div>on the page that is loading within the <iframe>and you can control the scrolls.
将 放在<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>
回答by sputn1k
this works for me (even on safari too):
这对我有用（即使在 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>
Or you can do this too:
或者你也可以这样做：
CSS
CSS
iframe {
overflow-y:scroll !important;
overflow-x:hidden !important;
overflow:hidden;
height:100%; /* optional */
width:100%; /* optional */
border:none; /* optional */
}
HTML
HTML
<iframe src="http://url/file.html" scrolling="yes"></iframe>
*src (http://url/file.html), needs to point to a valid URL and HTML file.
*src ( http://url/file.html)，需要指向一个有效的 URL 和 HTML 文件。
