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

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

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

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

firefox 是三者之中最麻烦的：

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

那你的CSS就还要再加上：

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

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

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

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

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

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

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

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

以上就是关于滚动条滚动时显示，不滚动时隐藏全部的内容，包括:滚动条滚动时显示，不滚动时隐藏、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！