HTML iframe – 禁用滚动

我在我的网站中有以下iframe：

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe> 

它有滚动条。
如何摆脱他们？

Answer 1

不幸的是，我不相信只有HTML和CSS属性才能完全符合HTML5。 幸运的是，大多数浏览器仍然支持scrolling属性（从HTML5规范中删除）。

overflow不是HTML5的解决scheme，因为错误地支持这个的唯一的现代浏览器是Firefox。

目前的解决办法是将两者结合起来：

 <iframe src="" scrolling="no"></iframe> iframe { overflow:hidden; } 

但是这可能会随着浏览器更新而过时。 你可能想要检查这个JavaScript解决scheme： http : //www.christersvensson.com/html-tool/iframe.htm

编辑：我检查和scrolling="no"将在IE10，Chrome 25和Opera 12.12工作。

Answer 2

我用这个CSS解决了同样的问题：

  pointer-events:none; 

Answer 3

这似乎正在使用

 html, body { overflow: hidden; } 

在 IFrame 内部

编辑：当然，这只是工作，如果你有权访问Iframe的内容（我有我的情况）

Answer 4

将所有内容设置为：

 #yourContent{ width:100%; height:100%; // in you csss } 

问题在于，iframe滚动是由内容由iframe自己设置的。

在CSS中设置内容为100％，在HTML中设置为iframe

Answer 5

为你的iframe标签添加这个样式..

 overflow-x:hidden; overflow-y:hidden; 

Answer 6

低于html5版本

 iframe { overflow:hidden; } 

在html5中

 <iframe seamless="seamless" ....> iframe[seamless]{ overflow: hidden; } 

但尚未正确支持

Answer 7

由于“溢出：隐藏” 属性不正确的工作在iFrame本身，但似乎给应用到iFrame 内页面的正文结果，我试过这个：

 iframe body { overflow:hidden; } 

令人惊讶的是，使用Firefox，删除那些恼人的滚动条。

在Safari中，一个奇怪的2像素宽的透明线出现在iframe的右侧，在其内容和边界之间。 奇怪。

Answer 8

我在当前的浏览器（Google Chrome版本60.0.3112.113（官方版本）（64位））中尝试了滚动=“否”，并且不起作用。 但是，scroll =“no”确实起作用。 值得尝试

 <iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe> 

Answer 9

对于这个框架：

  <iframe src="" name="" id=""></iframe> 

我试过这在我的CSS代码：

  iframe#put the value of id here::-webkit-scrollbar { display: none; } 

Answer 10

你可以使用下面的CSS代码：

 margin-top: -145px; margin-left: -80px; margin-bottom: -650px; 

为了限制iframe的视图。