JS判断鼠标的滚轮滚动方向,鼠标是否在某个元素中 是向上还是向下滚动

    var x = null;
    var y = null;
    $(document).mousemove(function(e){ 
        x = e.pageX;
        y = e.pageY; 
    });


    var scrollFunc = function(e) {
            var e = e || window.event;
            var m = null;
            if(e.wheelDelta) {   
                m = e.wheelDelta;
                if(e.wheelDelta > 0) {     //当鼠标滚轮向上滚动时
                    divMousemove(1);
                }
                if(e.wheelDelta < 0) {     //当鼠标滚轮向下滚动时
                    divMousemove(2);
                }
            } else if(e.detail) {
                m = e.detail;
                if(e.detail < 0) {   //当鼠标滚轮向上滚动时
                    divMousemove(1);
                }
                if(e.detail > 0) {   //当鼠标滚轮向下滚动时
                    divMousemove(2);
                }
            }

        function divMousemove(upward){
            
            var btnList = $('.right_btn_block');//获取你想要的DIV
            var y1 = btnList.offset().top;  //div上面两个的点的y值
            var y2 = y1 + btnList.height();//div下面两个点的y值
            var x1 = btnList.offset().left;  //div左边两个的点的x值
            var x2 = x1 + btnList.width();  //div右边两个点的x的值
            if( x < x1 || x > x2 || y < y1 || y > y2){
                // console.log('鼠标不在该DIV中');
            }else{
                // console.log('鼠标在该DIV中');
                if(upward == 1){
                    //鼠标在该元素区域内向上滚动
                }else if(upward == 2){
                    //鼠标在该元素区域内向下滚动
                }
            };
            
        }     
    }
    //    给页面绑定鼠标滚轮事件,针对火狐的非标准事件 
    window.addEventListener("DOMMouseScroll", scrollFunc);
    //    给页面绑定鼠标滚轮事件,针对Google,mousewheel非标准事件已被弃用,请使用 wheel事件代替
    window.addEventListener("wheel", scrollFunc);
    //    ie不支持wheel事件,若一定要兼容,可使用mousewheel
    window.addEventListener("mousewheel", scrollFunc);

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值