iframe去掉滚动条依然能滚动的方法
编辑：Simone
2024-11-22 05:59:42
626 阅读
在网站开发过程中，如果直接去掉了iframe的滚动条的话会导致不能滚动！ 那么有什么办法可以实现去掉滚动条后依然能滚动呢？下面小编将6个步骤和大家演示！（注：例子代码只是为了方便演示，可以根据实际情况进行修改）
打开网站开发工具新建一个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依然可以滚动！
完整代码：
版权声明：本站【趣百科】文章素材来源于网络或者用户投稿，未经许可不得用于商用，如转载保留本文链接：https://www.qubaik.com/life/72546.html
