[英]Mousewheel event in modern browsers
我想为鼠标滚轮事件使用干净漂亮的 JavaScript,只支持最新版本的常见浏览器,没有过时版本的遗留代码,没有任何 JS 框架。
鼠标滚轮事件在这里得到了很好的解释。 如何为当前最新版本的浏览器简化它?
我无法访问所有浏览器来测试它,所以caniuse.com对我有很大帮助。 唉,那里没有提到鼠标滚轮。
根据德里克的评论,我写了这个解决方案。 它对所有浏览器都有效吗?
someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
// custom code
});
干净简单:
window.addEventListener("wheel", event => console.info(event.deltaY));
浏览器可能会返回不同的 delta 值(例如,Chrome 返回+120
(向上滚动)或-120
(向下滚动)。标准化它的一个好技巧是提取其符号,有效地将其转换为+1
/ -1
:
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
console.info(delta);
});
参考: MDN 。
这是一篇描述这一点的文章,并给出了一个例子:
http://www.sitepoint.com/html5-javascript-mouse-wheel/
相关代码,减去给出的调整图像大小的具体示例:
var myitem = document.getElementById("myItem");
if (myitem.addEventListener)
{
// IE9, Chrome, Safari, Opera
myitem.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
{
myitem.attachEvent("onmousewheel", MouseWheelHandler);
}
function MouseWheelHandler(e)
{
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
return false;
}
这也适用于 Firefox、Chrome 和 Edge:
window.addEventListener("wheel", function(e) {
var dir = Math.sign(e.deltaY);
console.log(dir);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.