软装设计专业_大型网站制作方案_兰州网络推广推广机构_西安seo优化排名

iframe 隐藏滚动条

1. 直接隐藏的策略：

frame 有个属性 scrolling，直接设置 scrolling=‘no’ 即可隐藏 scrollbar。这样iframe就不能滚动了。

<iframe src="https://www.baidu.com/" scrolling="no"></iframe>

2. 修改 iframe 内部的样式

主要是外部的样式无法影响 iframe 内部，本来隐藏主 html 的滚动条的话，只需要设置一下 -webkit-scrollbar 就可以了。

::-webkit-scrollbar { width: 0; background:transparent; 
}

相应的，给 iframe 内部的 body 增加这个样式的话就能隐藏 iframe 的滚动条了。因此增加以下代码即可。

function addCSS(css) {var style = document.createElement('style')if (style.styleSheet) {// IEstyle.styleSheet.cssText = css} else {// W3Cstyle.appendChild(document.createTextNode(css))}for (let frame of document.getElementsByTagName('iframe')) {frame.contentWindow.document.body.append(style)}
}// 使用函数来添加一些CSS
addCSS(`::-webkit-scrollbar {width: 0; background: transparent; }
`)