鼠标滚轮滚动事件wheel

鼠标得滚动事件wheel

鼠标的滚轮事件主要有两种:

  • onmousewheel(firefox不支持)
  • DOMMouseScroll(只有firefox支持)

wheel 的事件对象得属性:

deltaY、detail、wheelDelta ,deltaMode detail

deltaX,鼠标滚轮左右摆动,本属性是只读的。 负值,向左;正值,向右。(正负方向,跟系统的x坐标保持一致。)
deltaY,鼠标滚轮上下滚动,只读。负值,向上;正值,向下。
deltaMode,属性返回一个数字,表示滚动值 (deltaX,deltaY,deltaZ) 的长度单位。
wheelDelta, 属性返回一个数字 正数表示向上滚动 ,负数表示向下滚动
detail 属性返回一个数字 在firefox中 正数表示向下滚动 ,负数表示向上滚动 与wheelDelta相反

如何判断鼠标滚轮得滚动方向得兼容写法

function mouseWheel(e) {
        e = e || window.event;
        console.log(e);
	    if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件
		    if (e.wheelDelta > 0) {
			    alert("滑轮向上滚动");
			    console.log(e.wheelDelta)
			    console.log(e.deltaMode)
			    console.log(e.detail)
		    }
		    if (e.wheelDelta < 0) { 
		        alert("滑轮向下滚动");
		        console.log(e.wheelDelta)
		    }
	    } else if (e.detail) {  //Firefox滑轮事件
		    if (e.detail> 0) {
			    alert("滑轮向下滚动");
			    console.log(e.detail)
		    }
		    if (e.detail< 0) { 
				alert("滑轮向上滚动");
				console.log(e.detail)
		    }
	    }
}
//给页面绑定滑轮滚动事件
//其他浏览器
document.onmousewheel = mouseWheel;
//火狐使用DOMMouseScroll绑定
document.addEventListener("DOMMouseScroll", mouseWheel)

scroll事件和wheel事件区别

onscroll 在滚动条滚动的时候被触发。
onscroll 触发可以有多种方式,只要可以让滚动条发生滚动(X方向或Y方向)都可以触发该事件
onscroll 滚动条不存在(容器的内容小于容器的大小)或者手动隐藏(添加样式overflow:hidden)
就不会被触发
onwheel 只要在鼠标滚轮滚动的时候就会触发 不论是否有滚动条

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值