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

有的时候总是会碰到稀奇古怪的需求，像现在就有一个判断条滚动时显示，不滚动时隐藏的。按照一般的滚动条显示隐藏需求，基本上是用css的hover属性，hover的时候显示滚动条，否则隐藏。

如需直接看demo的朋友请直接滑到最后，上面与中间部分是介绍css与JavaScript对滚动条的控制。

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

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

在这里呢，我参考了掘金大佬的一篇文章，给大家附上链接，作者：Yeefun
链接：https://juejin.im/post/6844903552217792520

针对不同的浏览器，有不同的隐藏滚动条的方法，以下针对三大浏览器 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;
}

总结下来

综上所述，如果你想让三大浏览器的滚动条都隐藏，并且可以捲动，那你的CSS就至少要长这样：

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;
}

至于width: 100vw;要加在何处，就要看你的HTML结构长怎样了。

优点

可以让读者更聚焦于内文，而不会看到滚动条很短就懒得看、跳出网页，或一心急，就把滚动条直直往下拉。换言之，就是强迫读者慢慢地把内容看完。

缺点

假如读者想往回看，可能就会要滚很久。所以，如果你想为较长的内文隐藏滚动条，建议应有导览列，让读者可以快速跳到某一处。

上文出处附注：

标题：如何把滚动条隐藏，
作者：Yeefun点击可跳转链接，
链接：https://juejin.im/post/6844903552217792520

好了，现在我们知道滚动条隐藏了，后面就有滑动时显示滚动条，滚动条没有滑动时隐藏，获取滚动条一般是写

document.getElementById('xxx').onscroll = function() {
       // console.log()
}

但是我们这里用EventTarget.addEventListener() ；同时也用到了css的calc计算属性，关于EventTarget.addEventListener()，不了解的童鞋可以仔细看看，如果已经知道的童鞋可以直接略过

addeventListener()方法介绍

方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素Element,Doument和Window或者任何其他支持事件的对象（比如XMLHttpRequest）

原理

addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的时间侦听器列表中。

addEventListener()语法

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted);  // Gecko/Mozilla only

好了，废话不多说，直接上代码，这个是写的一个小demo，感兴趣的童鞋可以直接copy下来到浏览器运行。

<!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>

在这里呢我是直接把body的滚动条隐藏了，width: 0px;然后再自己写了个id为box的div，这个box为自定义滚动条，像上面我也给它自定义了一些样式，class为small的div，就是我们的内容啦。在JavaScript的代码里，我们定义了一个滚动的值，一个是和时间对比的值，主要的话就是一个定时器，每隔300毫秒就校验一次，滚动条与上次滚动的是否相等，如果相等，那么就说明滚动条是静止的，不相等说明就是滚动条正在滚动当中。所以这里用了css的计算属性calc()，当滚动条静止，那么这个box的width就增加18px，不静止就回到原来的位置。

好了，这篇文章到这里就要结束了，如果您正在看这篇文章，觉得对您有帮助的话，就麻烦您的小手手给我点个赞吧^ _ ^，如果有任何疑惑或建议，都可在下方留言，一起交流、学习。