从 iframe 中删除滚动条

Posted 2023-02-16

【中文标题】从 iframe 中删除滚动条

【英文标题】：Remove scrollbar from iframe

【发布时间】：2012-04-22 08:29:58

【问题描述】：

使用此代码

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" margin margin name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

它是这样显示的（http://www.talkjesus.com主页上的喊话框）

如何去掉水平滚动条，修改垂直滚动条的css？

【问题讨论】：

与***.com/questions/4856746/… 重复，有更好的答案

【参考方案1】：

将scrolling="no" 属性添加到 iframe。

【讨论】：

可以用 css 做到这一点吗？

是的，但是在 Chrome 中不能使用 scrollIntoView。见code.google.com/p/chromium/issues/detail?id=137214

好吧，这隐藏了内容的滚动条，并防止滚动内容。它不会阻止 iframe 的滚动条出现。

iframe 上的滚动属性现已正式过时。应该改用 CSS。

@MikePoole 它可能已正式过时，但在 Chrome 65.0.3325.181 上设置 overflow:hidden; 无济于事，但 scrolling="no" 有帮助。

【参考方案2】：

这适用于所有浏览器

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

【参考方案3】：

在 iframe 上添加 scroll="no" 和 style="overflow:hidden" 不起作用，我必须在 iframe 中加载的 html 文档的正文中添加 style="overflow:hidden"。

【讨论】：

如果这有帮助，Firefox 中存在一个问题，如果你有一个元素 CSS transform: scale(0.7) 或类似的，这将创建滚动条（将显示在你的 iFrame 中），除非你剪辑它在祖先上使用overflow: hidden;（可以是 div 而不是 body）。

那是因为它是'scrolling=no'，而不是'scroll=no'。

你的意思是装在我们里面装周围？周围是什么？

加载在

【参考方案4】：

尝试添加scrolling="no" 属性，如下所示：

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

【参考方案5】：

只需将 scrolling="no" 和 seamless="seamless" 属性添加到 iframe 标记即可。像这样：-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

更新：

seamless 属性已在所有主流浏览器中被删除

【讨论】：

无缝属性为removed from HTML。

你必须使用css而不是无缝属性。

@NimaRahbar 无缝属性可能已经过时，但是 css 不支持 iframe 参数。

【参考方案6】：

如果这里有人在禁用 iframe 上的滚动条时遇到问题，可能是因为 iframe 的内容在 html 元素下方元素上有滚动条！

一些布局将html 和body 设置为100% 高度，并使用#wrapper div 和overflow: auto;（或scroll），从而将滚动移动到#wrapper 元素。

在这种情况下，除了编辑其他页面的内容之外，您所做的任何事情都不会阻止滚动条出现。

【参考方案7】：

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

使用上面的div，在任何浏览器中都不会显示滚动条。

【讨论】：

seamless 属性不是有效的 HTML5，大多数浏览器不支持 (caniuse.com/#search=seamless)，并且大多数其他样式都是不必要的。

【参考方案8】：

在你的 CSS 中添加这个来隐藏两个滚动条

iframe 

  overflow-x:hidden;
  overflow-Y:hidden;

【参考方案9】：

iframe 
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);

div 
  overflow-x: hidden;

这样，您可以使 iframe 的宽度大于应有的宽度。 然后用 overflow-x: hidden 隐藏水平滚动条。

【参考方案10】：

这是最后的手段，但值得一提：

您可以使用 iframe 父级上的 ::-webkit-scrollbar 伪元素来摆脱那些著名的 90 年代滚动条。

::-webkit-scrollbar 
    width: 0px;
    height: 0px;

编辑：虽然是relatively supported，::-webkit-scrollbar 可能并不适合所有浏览器。谨慎使用:)

【讨论】：

这是唯一对我有帮助的答案。您仍然可以滚动，但看不到丑陋的滚动条。谢谢！

【参考方案11】：

在你的 CSS 中：

iframe
    overflow:hidden;

【讨论】：

谢谢，但仅水平滚动并且仍显示在 Firefox 中。不会出现在 Chrome 和 IE 中。此外，滚动条的 CSS 仅在 IE 中有效应用，而不是 FF 或 Chrome（后者显示默认的米色/阴影）。

这不起作用，因为溢出发生在 iframe 文档中，由于跨域 iframe 安全限制，您通常无法修改。

这不起作用，因为这不会影响 iframe 的内容，只会影响 iframe 本身。解决方案是 scrolling="no"。

这是一个不正确的答案，不会删除谷歌浏览器中的滚动条，但 scrolling="no" 会。

这个答案应该是不被接受的。这是一个错误的答案。

【参考方案12】：

在你的 CSS 中添加这个来隐藏水平滚动条

iframe
    overflow-x:hidden;

【参考方案13】：

以上答案都不适合我。 这就是我在 JS 中所做的：

选择 iframe 元素：

var iframe_name = document.getElementById("iframe_name");

为其添加属性：

  iframe_name.scrolling = "no";

【参考方案14】：

当什么都不起作用时，float:left 可以保护你。

iframefloat:left;清除：两者；