从iframe移除滚动条

117

使用此代码

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

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

如何删除水平滚动条并修改垂直滚动条的CSS？

html css iframe

— 对看不见的事物的信心
source

2

与复制stackoverflow.com/questions/4856746/...其中有一个更好的答案

— 丹尼尔TULP

9

在你的CSS：

iframe{
    overflow:hidden;
}

— aki
source

7

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

— 看不见的事物的信仰

3

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

— thdoan

54

这是行不通的，因为这不会影响iframe的内容，只会影响iframe本身。解决方案是scrolling =“ no”。

— TheLD

4

这是一个错误的答案，不会删除google chrome中的滚动条，但是scrolling =“ no”会删除。

— 安德斯·林登

@LarsVandeDonk您的答案应该是正确的解决方案。

— Wong Jia Hau

313

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

— 渴望
source

1

能用CSS做到这一点？

— Evorlor 2015年

1

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

— Peter Brand

1

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

— Dave Cousineau

3

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

— Mike Poole'17

4

@MikePoole官方上可能已经过时了，但是它并没有帮助overflow:hidden;在Chrome 65.0.3325.181上进行设置，但是scrolling="no"有所帮助。

— 有些

28

这适用于所有浏览器。jsfiddle在这里http://jsfiddle.net/zvhysct7/1/

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

— 贾加拉扬C
source

21

在iframe上添加scroll="no"和style="overflow:hidden"无效，我不得不style="overflow:hidden"在iframe中加载的html文档正文中添加。

— 必杀技
source

1

如果这样做有帮助，则说明Firefox中存在问题，如果您具有CSS之transform: scale(0.7)类的元素，则会创建滚动条（将显示在iFrame中），除非您将其剪切overflow: hidden;在祖先上（可以是div而不是身体）。

— WraithKenny

8

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

— 布莱恩·格林

你是说装在我们里面装吗？周围是什么？

— 若奥·皮门特尔·费雷拉

加载到<iframe src =“ / test.html”>内部，其中test.html具有此设置。

— nirvana74v

15

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

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

展开摘要

— 阿拉布B
source

11

只需向iframe代码添加scrolling="no"和seamless="seamless"属性即可。像这样：-

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

— 尼玛·拉巴尔（Nima Rahbar）
source

13

Seamless属性已从HTML中删除。

— neopickaze

您必须使用CSS而不是Seamless属性。

— 尼玛·拉巴尔

@NimaRahbar Seamless属性可能已过时，但CSS不支持iframe参数。

— 被遗弃的购物车

9

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

某些布局设置为html，body高度为100％，并使用#wrapperdiv与overflow: auto;（或scroll），从而将滚动条移动到#wrapper元件。

在这种情况下，除了编辑其他页面的内容外，您将无法阻止滚动条显示。

— 幽灵肯尼
source

8

<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，它将不会在任何浏览器中显示滚动条。

— 狂怒骑士
source

3

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

— 2016年

8

将此添加到CSS中以隐藏两个滚动条

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

— 迪皮卡·帕特尔（Deepika Patel）
source

6

这是不得已的方法，但值得一提-您可以使用父::-webkit-scrollbar元素上的伪元素iframe来摆脱那些著名的90年代滚动条。

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

编辑：虽然相对受支持，但::-webkit-scrollbar可能不适合所有浏览器。谨慎使用:)

— 点播
source

2

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

— Karmidzhanov

4

将其添加到CSS中以仅隐藏水平滚动条

iframe{
    overflow-x:hidden;
}

— 阿比杰夫
source

3

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

这样，您可以使Iframe的宽度大于应有的宽度。然后，您可以使用下溢-x隐藏水平滚动条。

— Nico烧烤
source