94

我的网站中有以下 iframe：

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

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

4

12 回答 12

182

不幸的是，我认为仅使用 HTML 和 CSS 属性来完全符合 HTML5 是不可能的。然而幸运的是，大多数浏览器仍然支持该scrolling属性（已从HTML5 规范中删除）。

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 中工作。

于 2013-03-19T08:52:31.993 回答
22

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

    pointer-events:none;
于 2014-12-15T09:38:10.183 回答
12

它似乎可以使用

html, body { overflow: hidden; }

在IFrame内

编辑：当然，这只有在您有权访问 iframe 的内容时才有效（在我的情况下）

于 2016-05-20T11:37:38.440 回答
2

将所有内容设置为：

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

问题是 iframe 滚动是由内容而不是 iframe 本身设置的。

使用 CSS 将内部内容设置为 100%，并在 HTML 中设置 iframe 所需的内容

于 2016-06-19T06:01:59.293 回答
1

我在当前的浏览器（Google Chrome 版本 60.0.3112.113（官方版本）（64 位））中尝试了 scrolling="no"，但没有成功。但是， scroll="no" 确实有效。可能值得一试

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
于 2017-09-16T13:42:20.497 回答
0

由于“溢出：隐藏；” 属性在 iFrame 本身上无法正常工作，但在应用于iFrame内的页面主体时似乎会给出结果，我试过这个：

iframe body { overflow:hidden; }

令人惊讶的是，它确实适用于 Firefox，消除了那些烦人的滚动条。

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

于 2016-05-27T10:45:50.847 回答
0

这对我有用：

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

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

于 2020-06-28T14:27:08.927 回答
-1

添加此样式..为您的 iframe 标记.. 

overflow-x:hidden;
overflow-y:hidden;
于 2013-03-19T08:27:37.327 回答
-1

只需添加一个类似于以下任一选项的 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>
于 2019-08-30T23:26:08.980 回答
-2

对于这个框架：

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

我在我的css代码上试过这个：

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }
于 2016-03-17T02:25:43.967 回答
-3

html5以下版本

iframe {
    overflow:hidden;
}

在 HTML5 中

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


iframe[seamless]{

   overflow: hidden;
}

但尚未正确支持

于 2013-03-19T09:00:14.940 回答
-6

您可以使用以下 CSS 代码：

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

为了限制 iframe 的视图。

于 2015-12-24T22:47:22.620 回答