iframe去掉滚动条依然能滚动的方法
1、打开网站开发工具新建一个HTML页面
2、编写HTML代码
核心代码：
<div class="iframe-wrap">
<iframe src="iframe.html" class="iframe-box"></iframe>
</div>
3、编写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;
}
4、在新建一个HTML页面（也就是需要嵌套的iframe页面）
核心代码：
<body >
<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>
