HTML ===＞去掉页面滚动条，但保留滚动效果

普罗旺斯.

已于 2022-09-12 23:15:03 修改

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： vue.js 前端 css

于 2022-03-29 21:26:25 首次发布

本文链接：https://blog.csdn.net/qq_42700109/article/details/123832698

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

制造两层，一个父层，一个子层，如果是div去滚动条就在内容div外面再加一层div，如果是要去掉整个页面的滚动条，那就给html（父）和body（子）设置样式就可以了。

html{
    height: 100%;
    width: 100%;
    overflow: hidden;  
}
body{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
}

<html>
    <head >
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .parentDiv{
                height: 100px;  
                width: 200px;  
                overflow: hidden;  
                border: 1px solid #ccc;  
            }
            .childDiv{
                height: 100%;  
                width: 200px;  
                overflow-y: auto;  
                overflow-x: hidden; 
            }
        </style>
    </head>
    <body>
        <div class="parentDiv">
            <ul class="childDiv">
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
    </body>
</html>