html - 从 iframe 中删除滚动条

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主页上的喊话框）

如何移除水平滚动条并修改垂直滚动条的css？

score 407 · Accepted Answer

407

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

于 2014-01-20T02:04:10.467 回答

score 45 · Accepted Answer

这适用于所有浏览器

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

score 27 · Accepted Answer

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

score 20 · Accepted Answer

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

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

更新：

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

score 20 · Accepted Answer

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

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

score 10 · Accepted Answer

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

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

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

score 8 · Accepted Answer

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

score 8 · Accepted Answer

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

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

score 6 · Accepted Answer

6

在你的 CSS 中：

iframe{
    overflow:hidden;
}

于 2012-04-10T02:01:12.473 回答

score 6 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

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 隐藏水平滚动条。

score 5 · Accepted Answer

5

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

iframe{
    overflow-x:hidden;
}

于 2013-09-25T06:26:03.667 回答

score 2 · Accepted Answer

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

选择 iframe 元素：

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

将属性添加到它：

  iframe_name.scrolling = "no";

score -1 · Accepted Answer

-1

当没有任何效果时， float:left 可以保护您。

iframe {浮动：左；清除：两者；}

于 2022-01-15T02:59:23.267 回答

html - 从 iframe 中删除滚动条

14 回答 14

Related

Reference