0
点赞
收藏
分享

微信扫一扫

HTML 去掉页面滚动条,但保留滚动效果

alonwang 2022-03-30 阅读 83

制造两层,一个父层,一个子层,如果是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>
举报

相关推荐

0 条评论