zoukankan      html  css  js  c++  java
  • JS鼠标滚轮事件详解

    鼠标滚轮事件

    //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了
    //判断鼠标滚轮滚动方向
    if (window.addEventListener)//FF,火狐浏览器会识别该方法
        window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;//W3C
    //统一处理滚轮滚动事件
    function wheel(event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
            delta = event.wheelDelta/120; 
            if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
        } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
            delta = -event.detail/3;
        }
        if (delta)
            handle(delta);
    }
    //上下滚动时的具体处理函数
    function handle(delta) {
    if (delta <0){//向下滚动
            
        }else{//向上滚动
            
        }
    }
    
    • IE、chrome监听的是wheelDelta,向下滚动其值为-120;向上滚动其值为120
    • FF监听的是detail,向下滚动其值为3;向上滚动其值为-3

    jQuery写法

    $(document).on('mousewheel DOMMouseScroll', onMouseScroll);
    function onMouseScroll(e){
        e.preventDefault();
        var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
        var delta = Math.max(-1, Math.min(1, wheel) );
        if(delta<0){//向下滚动
            console.log('向下滚动');
        }else{//向上滚动
            console.log('向上滚动');
        }    
    }
    

    参考

  • 相关阅读:
    排序算法(牢记)
    【性能优化】优化笔记之一:图像RGB与YUV转换优化
    wikioi 3027 线段覆盖 2
    浅谈HTTP响应拆分攻击
    HTTP Response Spliting 防范策略研究
    百度地图API使用介绍
    百度地图
    PHP htmlspecialchars() 函数
    CSRF防范策略研究
    SQL手工注入
  • 原文地址:https://www.cnblogs.com/jjxhp/p/11736066.html
Copyright © 2011-2022 走看看