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

最新推荐文章于 2022-11-28 08:01:49 发布

water_Popcorn

最新推荐文章于 2022-11-28 08:01:49 发布

阅读量1.3w

点赞数 5

分类专栏： html

本文链接：https://blog.csdn.net/water_Popcorn/article/details/78584209

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

效果：

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

water_Popcorn

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
iframe去掉竖向滚动条仍可以滚动

iframe内部页面代码：html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> .inner-container { position: absolute; left: 0; overflow-x: hidden;
复制链接

扫一扫