zoukankan      html  css  js  c++  java
  • js_事件——鼠标滚轮事件

    1.mousewheel事件

      当鼠标滚轮滚动时在页面上触发mousewheel事件,该事件会一直冒泡到window对象上。当鼠标向前滚动时,event.wheelDelta的值为正数,向后滚动时为负数。(谷歌是正负150,Edge、opera是正负120)

    2.DOMMouseScroll事件

      这是firefox独有的事件,当鼠标向前滚动时,event.detail的值为-3的倍数,否则为3的倍数。

      DOMMouseScroll事件只能通过事件监听——addeventListener来进行绑定。

    一般通过检测正负号来检测鼠标滚轮向前还是向后。

    Warining:chrome、Edge、Opera浏览器的mousewheel事件的event.wheelDelta值是滚轮向前滚为正数,向后滚为负数。FireFox则不然,向前为负,向后为正。

    代码:

    var oContent=document.getElementById("content");
            oContent.addEventListener("mousewheel",(event)=>{
                alert(event.wheelDelta);
            },false);
            oContent.addEventListener("DOMMouseScroll",(event)=>{
                alert(event.detail);
            },false);

    chrome:

    EDGE:

    Opera:

     FireFox:

  • 相关阅读:
    vue-cli与后台数据交互增删改查
    echart地图下钻
    Vue中data重置问题
    页面滚动tab监听
    less笔记
    bootstrap-table 行内编辑
    bootstrap-table固定表头固定列
    微信分享配置(js-sdk)
    npm查看全局安装过的包
    页面固定定位超出一屏
  • 原文地址:https://www.cnblogs.com/Syinho/p/12272242.html
Copyright © 2011-2022 走看看