鼠标滚动事件的总结

发表于 | 更新于 | 分类于 | 阅读次数：

一. 什么是鼠标滚轮事件？

  1. 鼠标滚轮事件: 用户通过鼠标滚动触发的事件。

二. 如何使用？

鼠标滚动事件一直存在着兼容性问题，主要区分为是火狐浏览器，非火狐浏览器

  1. 在非火狐浏览器下如何使用(IE,360,Chrome)。
    1
    2
    3
    4
    5
    let wheel = function (){
        console.log('Hello world')
    };

    window.onmousewheel = document.onmousewheel = wheel;

问题: 这样写在单页面应用中离开当前页还是存在事件 只能通过强行赋值的方式清除 window.onmousewheel = document.onmousewheel = wheel=function(){}
如何解决:

1
2
window.addEventListener('mousewheel', wheel, false);
window.removeEventListener('mousewheel', wheel, false);

这样鼠标每次滚动都会输出一次，不论是向上还是向下;离开单页面也会清楚事件

  1. 在火狐浏览器下如何使用

    1
    2
    3
    4
    5
    6
    let wheel = function (){
        console.log('Hello world')
    };
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }

    火狐浏 览器没有 ‘onmousewheel’ 事件 所以使用火狐浏览器自带的 ‘DOMMouseScroll’ 事件

  2. 可以共用的方法
    通过上面的总结我们可以做一个公用的方法 在浏览器中使用

    1
    2
    3
    4
    5
    6
    7
    let wheel = function (){
        console.log('Hello world')
    };
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }   
    window.addEventListener('mousewheel', wheel, false);

三. 上下滚动事件？

  1. 有时候单独的滚动事件并不能满足我们的需求，我们需要更加复杂的变化。向上滚动/向下滚动 它们也存在着浏览器兼容性的问题 非火狐浏览器/火狐浏览器

  2. 非火狐浏览器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var wheel = function (event){
        var delta = 0;
        if (!event){
            event = window.event; /* For IE. */
        }
        // event.wheelDelta 向下滚动是-120 向上滚动是120
        if (event.wheelDelta) { /* IE/Opera. Chrome*/
            delta = event.wheelDelta / 120;
        }
        if (event.preventDefault){// 去除浏览器默认事件
            event.preventDefault();
        }
        event.returnValue = false;
    };
    document.addEventListener('mousewheel',wheel,false)

  3. 火狐浏览器

    火狐浏览器没有wheelDelta 属性 可以使用detail 代替

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var wheel = function (event){
        var delta = 0;
        if (!event){
            event = window.event; /* For IE. */
        }
        // event.detail 向下滚动是3 向上滚动是-3(3的倍数) 与其他浏览器不一致 所以在值的前面加个"-" 这样向上滚动是 正值 向下滚动是负值
        if (event.detail) {
            delta = -event.detail / 3;
        }

        if (event.preventDefault){// 去除浏览器默认事件
            event.preventDefault();
        }
        event.returnValue = false;
    };
    window.addEventListener('DOMMouseScroll', wheel, false);

  4. 可以共用的方法(滚动事件 + 上下滚动事件)
    通过上面的总结我们可以做一个公用的方法 在浏览器中使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var wheel = function(event) {// 解决浏览器兼容性 滑轮滚动问题
        var delta = 0;
        if (!event) /* For IE. */
            event = window.event;
        if (event.wheelDelta) { /* IE/Opera.Chrome*/
            delta = event.wheelDelta / 120;
        } else if (event.detail) {/*火狐*/
            delta = -event.detail / 3;
        }
        if (delta){
            if(delta>0){
                console.log('我在向上滚');
            }else if(delta<0){
                console.log('我在向下滚');
            }
        }
        if (event.preventDefault)
            event.preventDefault();
        event.returnValue = false;
    }
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    document.addEventListener('mousewheel',wheel,false)