html中iframe标签 隐藏滚动条

iframe 隐藏滚动条

1. 直接隐藏的策略：

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

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

复制代码

2. 修改 iframe 内部的样式

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

1. ::-webkit-scrollbar {
2.     width: 0;
3.     background:transparent;
4. }

复制代码

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

2. function addCSS(css) {
3.   var style = document.createElement('style')
4.   if (style.styleSheet) {
5.     // IE
6.     style.styleSheet.cssText = css
7.   } else {
8.     // W3C
9.     style.appendChild(document.createTextNode(css))
10.   }
11.   for (let frame of document.getElementsByTagName('iframe')) {
12.     frame.contentWindow.document.body.append(style)
13.   }
14. }
16. // 使用函数来添加一些CSS
17. addCSS(`
18.     ::-webkit-scrollbar {
19.         width: 0;
20.         background: transparent;
21.     }
22. `)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。