滚动条滚动时显示，不滚动时隐藏

时间：2024-02-22 12:42:51

像滚动条的控制样式我们基本知道，看下：

::-webkit-scrollbar // 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar // 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button // 滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece // 内层滚动槽
::-webkit-scrollbar-thumb // 滚动的滑块
::-webkit-scrollbar-corner // 边角
::-webkit-resizer // 定义右下角拖动块的样式

针对不同的浏览器，有不同的隐藏滚动条的方法，以下针对三大浏览器 chrome、ie（包括 edge）、firefox 分别叙述之：

Chorme

body::-webkit-scrollbar {
    display: none;
}

IE/Edge

body {
    -ms-overflow-style: none;
}

Firefox

firefox 是三者之中最麻烦的：

html {
    /*注意！若只打 hidden，chrome 的其它 hidden 会出问题*/
    overflow: -moz-hidden-unscrollable; 
    height: 100%;
}

body {
    height: 100%;
        /*浏览器滚动条的长度大约是 18px*/
    width: calc(100vw + 18px); 
    overflow: auto;
}

到此还没结束，你还要在一些地方加上width: 100vw;。
假设你的HTML长这样：

<body>
    <div id="example-1">
        <p>山有木兮木有枝，心悦君兮君不知。</p>
    </div>
    <article id="example-2">
        <h1>只愿君心似我心，定不负相思意！</h1>
        <p>入我相思门，知我相思苦</p>
        <button>古诗词</button>
    </article>
</body>

那你的CSS就还要再加上：

#example-1 {
    width: 100vw;
}

#example-2 {
    width: 100vw;
}

总结下来

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    height: 100%;
    width: calc(100vw + 18px);
    overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动条滑动显示不滑动隐藏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            overflow: -moz-hidden-unscrollable;
            height: 100%;
        }
        body::-webkit-scrollbar{
            width: 0px;
        }
        body {
            -ms-overflow-style: none;
            height: 100%;
            width: calc(100vw + 18px);
            overflow: auto;
        }
        #box::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }
        
        #box::-webkit-scrollbar-thumb {
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            background-color: #666;
        }
        
        #box::-webkit-scrollbar-track {
            background-color: #eee;
        }
        #box {
            width: calc(100vw - 0px);
            height: 100%;
            overflow-y: scroll;
        }
        .small {
            height: 3000px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="small"></div>
    </div>

    <script>
        let roll = 0; // 滚动的值
        let stop = 0; // 对比时间的值
        let timer = null;
        document.getElementById(\'box\').addEventListener(\'scroll\', function(){
            var e = event || event.target;
            // console.log(e.srcElement.scrollTop)
            // 每次滑动前都清除一遍我们定义的定时器
            clearTimeout(timer);
            // 每次滚动的时候，都让box回到原来的宽度
            document.getElementById(\'box\').style.width = \'calc(100vw - 0px)\';
            // 这里我设置的是300毫秒，您可以更改您想要的间隔秒数
            timer = setTimeout("JudgeScroll()", 300);
            roll = e.srcElement.scrollTop;
        })
        function JudgeScroll() {
            // console.log(roll,stop)
            stop = document.getElementById(\'box\').scrollTop;
            if(stop == roll) {
                // console.log(\'滚动停止\');
                // 判断如果相等，就把box宽度增加18px，达到隐藏滚动条的效果
                document.getElementById(\'box\').style.width = \'calc(100vw + 18px)\';
            }
        }
    </script>
</body>
</html>

 

相关文章