zoukankan      html  css  js  c++  java
  • Mouse Wheel Programming In JavaScript

    注:在JS编程当中经常会用到鼠标滚轮事件,但是要实现这个效果不得不考虑兼容情况

    罗列一下存在的兼容性问题:

    1、事件对象兼容,IE是window.event,而FF只需要传个参数(event)就行

    2、滚轮事件:IE/Chrome 使用onmousewheel,而FF就独树一帜,使用DOMMouseScroll

    3、获取滚轮的值:IE/Chrome使用onmousewheel的事件对象event的wheelDelta,而FF采用的是detail

    4、IE/Chrome向上滚动为120,向下滚动为-120;FF向上滚动为-3,向下滚动为3

    至于其他浏览器:如Opera,Safari本人没有测试,查资料(传送门)得知,和IE/Chrome一样,只有FF独特

    废话不多说,贴码

    HTML

    <label for="wheelDelta">滚动值:</label><input type="text" id="Delta" />

    JavaScript

    var oDelta=document.getElementById('Delta');
    var num=0;
    function mouseScroll(e){
        //事件对象兼容
        var e=e||window.event;
        var down=null;
        if(e.wheelDelta){
            down=e.wheelDelta;//IE,Chrome
        }else{
            down=-e.detail;//FF,注意负号
        }
        counter(down);
    }
    
    //添加事件
    if(document.addEventListener){document.addEventListener("DOMMouseScroll",mouseScroll,false);}//FF document.onmousewheel=mouseScroll;//IE/Chrome //计数 function counter(count){ if(count>0){ oDelta.value=num++; }else if(count<0){ oDelta.value=num--; } }

    PS:由于时间原因,没有加上阻止默认行为,有需要可以自己加上

  • 相关阅读:
    hdu 1042 N!(大数)
    1027代码审计平台 3 Java maven
    1027代码审计平台 2-sonarscanner项目变更
    1027代码审计平台 1-sonar scanner
    app遍历——appCrawler的使用
    markdown语法
    app crawler1
    WebDriverAgent原理
    yaml语言教程
    Air test 基于屏幕比例实现滑动的方法
  • 原文地址:https://www.cnblogs.com/gresic/p/3395730.html
Copyright © 2011-2022 走看看