zoukankan      html  css  js  c++  java
  • jquery 兼容的滚轮事件

    FireFox浏览器使用DOMMouseScroll事件,其他(包括IE6)都是使用onmousewheel事件;
    FireFox中wheelDelta判断滚动方向,其值为120/-120,为负数的时候表示向下滚动,整数的时候向上滚动
    其他:detail(属性)判断方向,返回值是3的整数倍(3/-3), 为正数表示向上滚动,负数向下滚动
    opera:同时拥有wheelDelta和detail,其中“detail”属性返回值和FF中的wheelDelta相同

    即:

     1 // jquery 兼容的滚轮事件
     2     $(document).on("mousewheel DOMMouseScroll", function (e) {
     3         console.log(e);
     4         
     5         var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
     6             (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
     7         if (delta > 0) {
     8             // 向上滚
     9             console.log("wheelup");
    10         } else if (delta < 0) {
    11             // 向下滚
    12             console.log("wheeldown");
    13         }
    14     });
  • 相关阅读:
    WebStorm2020.3.0及以下安装激活方法
    CSS随堂笔记【狂神说JAVA】
    HTML随堂笔记【狂神说JAVA】
    JAVA语言基础随堂笔记
    js 常用类和方法
    js 数组
    js 对象和函数
    js 基础语法
    JavaScript 简介
    PS基础
  • 原文地址:https://www.cnblogs.com/gggwf/p/8985295.html
Copyright © 2011-2022 走看看