Question

我的网站中有以下iframe：

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

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

Answer 1

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

overflow不是HTML5的解决方案，因为错误支持此功能的唯一现代浏览器是Firefox。

目前的解决方案是将两者结合起来：

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

但随着浏览器的更新，这可能会过时。您可能需要检查此解决方案的JavaScript解决方案：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中所需的内容设置为

Answer 5

我试过滚动=＆＃34;没有＆＃34;在我当前的浏览器（谷歌Chrome版本60.0.3112.113（官方版本）（64位）），并没有工作。但是，滚动=＆＃34;否＆＃34;做得好。可能值得尝试

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

Answer 6

为iframe代码添加此样式..

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

Answer 7

低于html5版本

iframe {
    overflow:hidden;
}

在html5中

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

但尚未正确支持

Answer 8

由于＆＃34; overflow：hidden;＆＃34; 属性无法在iFrame本身上正常工作，但在应用于页面正文时似乎会给出结果在 iFrame中，我尝试了这个：

iframe body { overflow:hidden; }

令人惊讶的是确实与Firefox合作，删除了那些令人讨厌的滚动条。

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

Answer 9

只需添加一个样式如下所示的iframe。我希望这可以解决问题。

第一个选项：

<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>

第二个选项：

<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>

Answer 10

这对我有用：

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

注意：如果您需要在其他任何元素中使用滚动条，也请在该元素中添加css {overflow:scroll!important;}

Answer 11

对于这个框架：

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

我在我的css代码上尝试了这个：

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

Answer 12

您可以使用以下CSS代码：

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

为了限制iframe的视图。

HTML iframe - 禁用滚动

12 个答案: