在该代码中,我使用鼠标滚轮放大/缩小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触控板也会得到不同的结果:
wheelDelta
鼠标滚轮的值为3而不是120。detail
通常2
有时候1
,但是当滚动速度非常慢时,无需事件处理程序。所以问题是:
区分这种行为的最佳方式是什么(理想情况下,没有任何用户代理或操作系统嗅探)?
发布于 2018-03-30 12:35:13
...我只能推荐使用这种简单的,基于符号的计数代码:
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
发布于 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上效果很好
https://stackoverflow.com/questions/-100007871
复制相似问题