iframe内部页面代码:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
.inner-container{
position:absolute; left:0;
overflow-x:hidden;
overflow-y:scroll;
}
/* for Chrome 只针对谷歌浏览器*/
.inner-container::-webkit-scrollbar{
display:none;
}
</style>
</head>
<bodyclass="inner-container">
<h1>爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水</h1>
</body>
</html>
外部包含iframe的代码:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
.outer-container{
position:relative;
overflow:hidden;
}
</style>
</head>
<body>
<divclass="outer-container">
<iframemarginWidth=0marginHeight=0src="demo1.html"scrolling="auto"frameBorder=0width="100%"></iframe>
</div>
</body>
</html>
效果:
横向和竖向滚动条都消失,滚动鼠标的时候,内容仍然可以实现滚动效果。