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

iframe内部页面代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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的代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

效果:

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

你可能感兴趣的:(html)