iframe去掉滚动条依然能滚动的方法
1、打开网站开发工具新建一个HTML页面
2、编写HTML代码核心代码：<div class="iframe-wrap"> <iframe src="iframe.html" class="iframe-box"></iframe> </div>
3、编写CSS代码核心代码：.iframe-wrap{ position: relative; over熠硒勘唏flow: 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; }
4、在新建一个HTML页面（也就是需要嵌套的iframe页面）核心代码：<bod鲻戟缒男y > <h1>《断章》--卞之琳</h1> <p>你站在桥上看风景</p> <p>看风景人在楼上看你</p> <p>明月装饰了你的窗子</p> <p>你装饰了别人的梦</p> </body>
5、给iframe页面添加修饰样式核心代码：p{ height: 50px; line-height: 50px; font-size: 16px; }
6、打开浏览器浏览刚才我们制作的页面，测试效果（可以使用滚轮和键盘上下键进行测试） 我们可以发现页面上没有滚动条，而且iframe依然可以滚动！完整代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>iframe去掉滚动条依然能滚动的方法</title><style type="text/css">*{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;}</style></head><body><div><iframe src="iframe.html"></iframe></div></body></html>
