JS原生监听滚动条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS原生监听滚动条相关的知识,希望对你有一定的参考价值。

参考技术A 你需要三个div即可实现,最外层div设置你需要显示的高宽以及overflow为hidden,第二层设置overflow-x。并将其宽度设置来超出最外层div,这样咱们的滚动条就会被在外层div所挡住,也就间接隐藏了滚动条也能滚动

以上便实现了滚动条隐藏且能滚动

这里IE/Chrome的用法是一致的,滚动事件onmousewheel,判断滚动属性为e.wheelDelta,且向上滚动是+120,向下是-120
而FireFox滚动事件DOMMouseScroll,判断滚动属性为e.detail,且向上是-3,向下是+3

这里需要兼容处理一下下。

以上是关于JS原生监听滚动条的主要内容,如果未能解决你的问题,请参考以下文章

两种监听页面滚动的方法

如何用js监听滚动条滚动事件

js监听两个滚动条,JavaScript、Html

原生JavaScript实现滚动条

原生js实现导航栏吸顶

vue的滚动条插件vue-scroll