JS原生监听滚动条

一.情景

需求：页面中间某个部分能随着鼠标滚动而滚动，且不显示滚动条。

二.思路

如果只是考虑webkit内核那就没说的了，有css属性可以设置。但往往只有移动端开发才能这么霸道
今天说的是兼容IE/Chrome/FireFox等主流浏览器的做法。

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

code

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

三.监听鼠标滚轮事件

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

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

var Fun= function(e) {
    var e = e || window.event;
     if (e.wheelDelta) {    
        //IE/Opera/Chrome 
        console.log(e.wheelDelta);
    } else if (e.detail) {
        //FireFox
        console.log(e.detail);
    }
}
if (document.addEventListener) {
    document.addEventListener('DOMMouseScroll', Fun, false);
} //FireFox
window.onmousewheel = document.onmousewheel = Fun; //IE/Opera/Chrome