zoukankan      html  css  js  c++  java
  • JS 鼠标滚轮事件(mousewheel/DOMMouseScroll)

    onmousewheel (FireFox不支持此事件)

    1 // IE/Opera/Chrome/Safari
    2 document.body.onmousewheel = function(event) {
    3     event = event || window.event;
    4     console.dir(event);    
    5 };

    DOMMouseScroll(FireFox独有事件)

    1 // Firefox
    2 document.body.addEventListener("DOMMouseScroll", function(event) {
    3     console.dir(event);    
    4 });

    js返回数值判断滚轮上下

    • Firefox 使用detail,只取 ±3.
    • 五大浏览器(IE、Opera、Safari、Firefox、Chrome)使用wheelDelta,只取 ±120.
    • 其中正数表示为向上,负数表示向下.

    Example

     1 <!DOCTYPE html>
     2 <html lang="en">
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Test wheel event</title>
     6     </head>
     7     <body style="height:2000px;">
     8         <script type="text/javascript">
     9             var scrollFunc = function(event){
    10                 event = event || window.event;
    11                 if(event.wheelDelta){ // IE/Opera/Chrome/Safari
    12                     t1 = event.wheelDelta;
    13                     console.log(t1);
    14                 }else if(event.detail){ // Firefox
    15                     t2 = event.detail;
    16                     console.log(t2);
    17                 }
    18             }
    19             /*注册事件*/
    20             if(document.addEventListener){
    21                 // firefox
    22                 document.body.addEventListener("DOMMouseScroll",scrollFunc,false);
    23             }
    24             document.body.onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari  
    25         </script>
    26     </body>
    27 </html>

    SEE ALSO

  • 相关阅读:
    ABP框架应用-MySQL数据库集成
    redis初识
    MySQL高级学习笔记
    Linux安装apache
    学习jvm(一)--java内存区域
    HashTable、HashMap与ConCurrentHashMap源码解读
    Linux安装禅道项目管理软件
    设计模式之六大原则
    设计模式之策略模式
    设计模式之分类
  • 原文地址:https://www.cnblogs.com/hzj680539/p/5095506.html
Copyright © 2011-2022 走看看