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

  • 相关阅读:
    jQuery选择器之层级选择器
    信息滚动制作
    scrollTop、offsetTop、clientTop
    模电GG
    matlab求解线性方程组
    NWERC2016I
    WEB开发资料集散
    NWERC2016H
    相量变换的性质
    GCJ2017R1C B. Parenting Partnering
  • 原文地址:https://www.cnblogs.com/hzj680539/p/5095506.html
Copyright © 2011-2022 走看看