JavaScript监控鼠标滚动方向

近来在优化“框框”主页,涉及到使用鼠标滚轮向下的交互,无需通过获取页面滑动的距离来判断鼠标滚动方向(鼠标是否在某个元素中,是向上还是向下滚动?),正好完全符合我的需求特在此记录以备需要。

   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);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
前端

开发中关于MathJax 渲染中断的问题

2023-4-8 22:40:22

javascript

javascript操作cookie保存一些基本信息

2023-4-9 17:35:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索