美文网首页
Js实现鼠标滚轮滑动监听

Js实现鼠标滚轮滑动监听

作者: 流浪的三鮮餡 | 来源:发表于2019-12-24 22:42 被阅读0次

    监听鼠标滚动行为

    windowAddMouseWheel();
    function windowAddMouseWheel() {
        var scrollFunc = function (e) {
            e = e || window.event;
            if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    alert("滑轮向上滚动");
                }
                if (e.wheelDelta < 0) { //当滑轮向下滚动时
                    alert("滑轮向下滚动");
                }
            } else if (e.detail) {  //Firefox滑轮事件
                if (e.detail> 0) { //当滑轮向上滚动时
                    alert("滑轮向上滚动");
                }
                if (e.detail< 0) { //当滑轮向下滚动时
                    alert("滑轮向下滚动");
                }
            }
        };
        //给页面绑定滑轮滚动事件
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        }
    //滚动滑轮触发scrollFunc方法
        window.onmousewheel = document.onmousewheel = scrollFunc;
    }
    

    禁止、启用鼠标滚动行为

    function disabledMouseWheel() {
        var div = document.getElementById('divid');
        if (div.addEventListener) {
            div.addEventListener('DOMMouseScroll', scrollFunc, false);
        }//W3C
        div.onmousewheel = div.onmousewheel = scrollFunc;//IE/Opera/Chrome
    }
      
    function scrollFunc(evt) {
        evt = evt || window.event;
        if (evt.preventDefault) {
            // Firefox
            evt.preventDefault();
            evt.stopPropagation();
        } else {
            // IE
            evt.cancelBubble = true;
            evt.returnValue = false;
        }
        return false;
    }
      
    window.onload = disabledMouseWheel;
    

    相关文章

      网友评论

          本文标题:Js实现鼠标滚轮滑动监听

          本文链接:https://www.haomeiwen.com/subject/gpcqoctx.html