iframe去掉竖向滚动条仍可以滚动

iframe内部页面代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="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>

<body class="inner-container">

<h1>爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水</h1>

</body>

</html>

外部包含iframe的代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.outer-container {

position: relative;

overflow: hidden;

}

</style>


</head>

<body >

<div class="outer-container">

<iframe marginWidth=0 marginHeight=0 src="demo1.html" scrolling="auto" frameBorder=0 width="100%"></iframe>

</div>

</body>

</html>

效果:

横向和竖向滚动条都消失,滚动鼠标的时候,内容仍然可以实现滚动效果。

上一篇:你还在使用xshell绿色破解版?


下一篇:知识网络-目录