规范跨浏览器的鼠标滚轮速度
规范跨浏览器的鼠标滚轮速度
提问于 2018-03-30 04:15:37
在该代码中，我使用鼠标滚轮放大/缩小HTML5 Canvas。我发现一些代码可以规范Chrome和Firefox之间的速度差异。但是，Safari中的缩放处理要比这两者中的缩放处理快得多。
这是我现在的代码：
var handleScroll = function(e){
var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
if (delta) ...
return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false); // Everyone else
我可以使用哪些代码为Chrome v10 / 11，Firefox v4，Safari v5，Opera v11和IE9上相同数量的鼠标滚轮获得相同的“增量”值？
进一步的调查显示，一个滚动事件'上'是：
| evt.wheelDelta | evt.detail
------------------+----------------+------------
Safari v5 / Win7 | 120 | 0
Safari v5 / OS X | 120 | 0
Safari v7 / OS X | 12 | 0
Chrome v11 / Win7 | 120 | 0
Chrome v37 / Win7 | 120 | 0
Chrome v11 / OS X | 3（！）| 0（可能错误）
Chrome v37 / OS X | 120 | 0
IE9 / Win7 | 120 | 未定义
Opera v11 / OS X | 40 | -1
Opera v24 / OS X | 120 | 0
Opera v11 / Win7 | 120 | -3
Firefox v4 / Win7 | undefined | -3
Firefox v4 / OS X | undefined | -1
Firefox v30 / OS X | undefined | -1
此外，即使在缓慢移动时，在OS X上使用MacBook触控板也会得到不同的结果：
- 在Safari和Chrome上，
wheelDelta鼠标滚轮的值为3而不是120。 - 在Firefox上，
detail通常2有时候1，但是当滚动速度非常慢时，无需事件处理程序。
所以问题是：
区分这种行为的最佳方式是什么（理想情况下，没有任何用户代理或操作系统嗅探）？
回答 2
Stack Overflow用户
发布于 2018-03-30 12:35:13
- OS X上同一浏览器的不同版本在过去已经产生了不同的价值，并且可能在未来也这样做
- 在OS X上使用触控板会产生与使用鼠标滚轮非常相似的效果，但会给出非常不同的事件值，但设备差异无法通过JS检测到
...我只能推荐使用这种简单的，基于符号的计数代码：
var handleScroll = function(evt){
if (!evt) evt = event;
var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
// Use the value as you will
};
someEl.addEventListener('DOMMouseScroll',handleScroll,false); // for Firefox
someEl.addEventListener('mousewheel', handleScroll,false); // for everyone else
这是我第一次尝试对脚本进行标准化。它在OS X上有两个缺陷：OS X上的Firefox将产生他们应该达到的值1/3，OS X上的Chrome会产生他们应该达到的值的1/40。
// Returns +1 for a single wheel roll 'up', -1 for a single roll 'down'
var wheelDistance = function(evt){
if (!evt) evt = event;
var w=evt.wheelDelta, d=evt.detail;
if (d){
if (w) return w/d/40*d>0?1:-1; // Opera
else return -d/3; // Firefox; TODO: do not /3 for OS X
} else return w/120; // IE/Safari/Chrome TODO: /3 for Chrome OS X
};
你可以在你自己的浏览器上测试这个代码：http : //phrogz.net/JS/wheeldelta.html
Stack Overflow用户
发布于 2018-03-30 13:48:26
这是我疯狂的尝试产生一个跨浏览器相干和规范化增量（-1 <= delta <= 1）：
var o = e.originalEvent,
d = o.detail, w = o.wheelDelta,
n = 225, n1 = n-1;
// Normalize delta
d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120;
// Quadratic scale if |d| > 1
d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n;
// Delta *should* not be greater than 2...
e.delta = Math.min(Math.max(d / 2, -1), 1);
这完全是经验性的，但在XP上的Safari 6，FF 16，Opera 12（OS X）和IE 7上效果很好
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007871
复制相关文章
相似问题