Question

使用此代码

<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主页上的shoutbox）

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

谢谢。

Answer 1

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

Answer 2

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

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

Answer 3

在你的css中：

iframe{
    overflow:hidden;
}

Answer 4

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

Answer 5

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

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

Answer 6

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

Answer 7

在你的css中添加它以隐藏两个滚动条

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

Answer 8

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

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

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

Answer 9

在你的css中添加它以隐藏水平滚动条

iframe{
    overflow-x:hidden;
}

Answer 10

这是最后的手段，但值得一提的是 - 你可以使用::-webkit-scrollbar父母的iframe伪元素来摆脱那些着名的90年代滚动条。

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

修改虽然它relatively supported，::-webkit-scrollbar可能不适合所有浏览器。谨慎使用:)）

Answer 11

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

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

Answer 12

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

像这样，使Iframe的宽度大于应有的宽度。然后，您将水平滚动条隐藏为overflow-x：已隐藏。

Answer 13

iframe{
    overflow:hidden;
}

<iframe src="#">

从iframe中删除滚动条

13 个答案: