HTML iframe - 禁用滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15494568/
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
HTML iframe - disable scroll
提问by Micha? Herman
I have following iframe in my site:
我的网站中有以下 iframe：
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>
And it has scrolling bars.
How to get rid of them?
它有滚动条。
如何摆脱它们？
回答by James Donnelly
Unfortunately I do not believe it's possible in fully-conforming HTML5 with just HTML and CSS properties. Fortunately however, most browsers do still support the scrollingproperty (which was removed from the HTML5 specification).
不幸的是，我不相信仅使用 HTML 和 CSS 属性就可以完全符合 HTML5。幸运的是，大多数浏览器仍然支持该scrolling属性（已从HTML5 规范中删除）。
overflowisn't a solution for HTML5 as the only modern browser which wronglysupports this is Firefox.
overflow不是 HTML5 的解决方案，因为唯一错误支持此功能的现代浏览器是 Firefox。
A current solution would be to combine the two:
当前的解决方案是将两者结合起来：
<iframe src="" scrolling="no"></iframe>
iframe {
overflow: hidden;
}
But this could be rendered obsolete as browsers update. You may want to check this for a JavaScript solution: http://www.christersvensson.com/html-tool/iframe.htm
但随着浏览器的更新，这可能会过时。您可能需要检查此 JavaScript 解决方案：http: //www.christersvensson.com/html-tool/iframe.htm
Edit:I've checked and scrolling="no"will work in IE10, Chrome 25 and Opera 12.12.
编辑：我已经检查过并将scrolling="no"在 IE10、Chrome 25 和 Opera 12.12 中工作。
回答by John Smith
I solved the same issue with this css:
我用这个 css 解决了同样的问题：
pointer-events:none;
回答by Alex
It seems to work using
它似乎可以使用
html, body { overflow: hidden; }
insidethe IFrame
在IFrame 内
edit: Of course this is only working, if you have access to the Iframe's content (which I have in my case)
编辑：当然，这仅适用于您可以访问 Iframe 的内容（在我的情况下）
回答by Verde Mc
Set all the content to:
将所有内容设置为：
#yourContent{
width:100%;
height:100%; // in you csss
}
The thing is that the iframe scroll is set by the content NOT by the iframe by itself.
问题是 iframe 滚动是由内容设置的，而不是由 iframe 本身设置的。
set the content to 100% in the interior with CSS and the desired for the iframe in HTML
使用 CSS 将内部的内容设置为 100%，并在 HTML 中为 iframe 设置所需的内容
回答by Zach Imholte
I tried scrolling="no" in my current browser (Google Chrome Version 60.0.3112.113 (Official Build) (64-bit)) and that didn't work. However, scroll="no" did work. Might be worth trying
我尝试在当前浏览器（Google Chrome 版本 60.0.3112.113（官方版本）（64 位））中滚动 =“no”，但没有奏效。但是， scroll="no" 确实有效。可能值得一试
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
回答by Arshadul Hossain
Just add an iframe styled like either option below. I hope this solves the problem.
只需添加一个类似于下面任一选项的 iframe 样式。我希望这能解决问题。
1st option:
第一个选项：
<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
2nd option:
第二个选项：
<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
回答by Seb Zaremba
Since the "overflow: hidden;"property does not properly work on the iFrame itself, but seems to give results when applied to the body of the page insidethe iFrame, I tried this :
由于“溢出：隐藏；” 属性在 iFrame 本身上不能正常工作，但似乎在应用于iFrame内的页面正文时会给出结果，我试过这个：
iframe body { overflow:hidden; }
Which surprisingly didwork with Firefox, removing those annoying scrollbars.
令人惊讶的是，它确实适用于 Firefox，删除了那些烦人的滚动条。
In Safari though, a weird 2-pixels-wide transparent line has appeared on the right side of the iframe, between its contents and its border. Strange.
但在 Safari 中，iframe 的右侧出现了一条奇怪的 2 像素宽的透明线，位于其内容和边框之间。奇怪的。
回答by sasi
Add this styles..for your iframe tag..
添加此样式..为您的 iframe 标签..
overflow-x:hidden;
overflow-y:hidden;
回答by Prashobh
below html5 versions
低于 html5 版本
iframe {
overflow:hidden;
}
In html5
在 html5
<iframe seamless="seamless" ....>
iframe[seamless]{
overflow: hidden;
}
but not supported correctly yet
但尚未正确支持
回答by Lucas Santos
For this frame:
对于这个框架：
<iframe src="" name="" id=""></iframe>
I tried this on my css code:
我在我的 css 代码上试过这个：
iframe#put the value of id here::-webkit-scrollbar {
display: none;
}
