您的位置首页百科知识

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

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;}