在网站开发过程中，如果直接去掉了iframe的滚动条的话会导致不能滚动！那么有什么办法可以实现去掉滚动条后依然能滚动呢？下面小编将6个步骤和大家演示！（注：例子代码只是为了方便演示，可以根据实际情况进行修改）
工具/原料
电脑
网站开发工具：HbuilderX
方法/步骤
1、打开网站开发工具新建一个HTML页面
2、编写HTML代码核心代码：<divclass="iframe-wrap"><iframesrc="iframe.html"class="iframe-box"></iframe> </div>
3、编写CSS代码核心代码：.iframe-wrap{ position:r娣定撰钠elative; 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>《断章》--卞之琳</h吭稿荔徊1> <p>你站在桥上看风景</p> <p>看风景人在楼上看你</p> <p>明月装饰了你的窗子</p> <p>你装饰了别人的梦</p> </body>
5、给iframe页面添加修饰样式核心代码：p{ height:50px;line-height:50px; font-size:16px; }
6、打开浏览器浏览刚才我们制作的页面，测试效侈砉齿垃果（可以使用滚轮和键盘上下键进行测试）我们可以发现页面上没有滚动条，而且iframe依然可以滚动！完整代码：&l墉掠载牿t;!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>iframe去掉滚动条依然能滚动的方法</title><styletype="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><iframesrc="iframe.html"></iframe></div></body></html>
