从 iframe 中删除滚动条

用这个密码

<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？

639446 次浏览
小开
最佳答案

在你的 css 里:

iframe{
overflow:hidden;
}
小开 
<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，它将不会在任何浏览器中显示滚动条。

小开

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

iframe{
overflow-x:hidden;
}
小开

向 iframe 添加 scrolling="no"属性。

小开

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

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

这在所有浏览器中都适用

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

更新:

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

只需将 scrolling="no"和 seamless="seamless"属性添加到 iframe 标记中

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

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

小开

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

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

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

小开

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

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

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

编辑: 虽然它是 相对支持，但是 ::-webkit-scrollbar可能不适合所有的浏览器

小开

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

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

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

像这样，你使 Iframe 的宽度大于它应该的宽度。 然后用 overflow-x: hide 隐藏水平滚动条。

小开

以上的答案对我来说都不管用。 这就是我在 JS 中所做的:

选择 iframe 元素:

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

向它添加属性:

  iframe_name.scrolling = "no";
小开

当一切都不起作用的时候，浮动: 左边可以保护你。

Iframe { float: left; clear: both; }

小开

而不是 iframe:

const blob = new Blob([data], { type: "application/pdf" });
const link = document.createElement("a");
const URL = window.URL.createObjectURL(blob);
link.href = URL;
link.download = filename;
//download the pdf
link.click();
//open the downloaded pdf in its default viewer
window.open(URL);
小开 

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


提交答案