iframe去掉滚动条依然能滚动的方法

iframe去掉滚动条依然能滚动的方法

打开网站开发工具新建一个HTML页面

编写HTML代码核心代码：

编写CSS代码核心代码：.iframe-wrap{ position: relative; overflow: hidden; width: 300px; height: 150px; background: #eee; } .iframe{ width: 100%; border: none; position: absolute; right: -20px; top: 0; bottom: 0; overflow-x: hidden; overflow-y: scroll; }

在新建一个HTML页面（也就是需要嵌套的iframe页面）核心代码： 《断章》--卞之琳 你站在桥上看风景 看风景人在楼上看你 明月装饰了你的窗子 你装饰了别人的梦

给iframe页面添加修饰样式核心代码：p{ height: 50px; line-height: 50px; font-size: 16px; }

打开浏览器浏览刚才我们制作的页面，测试效果（可以使用滚轮和键盘上下键进行测试） 我们可以发现页面上没有滚动条，而且iframe依然可以滚动！完整代码：iframe去掉滚动条依然能滚动的方法*{margin: 0; padding: 0;}.iframe-wrap{position: relative;overflow: hidden;width: 300px; height: 150px; background: #eee;}.iframe{width: 100%; border: none;position: absolute; right: -20px; top: 0; bottom: 0;overflow-x: hidden; overflow-y: scroll;}