我目前有这段代码:
canvas.onmousewheel = scroll;
function scroll(event) {
event.preventDefault();
var mousex = event.clientX - canvas.offsetLeft;
var mousey = event.clientY - canvas.offsetTop;
var wheel = parseInt(event.wheelDelta, 10) / 120; //n or -n
var zoom = 1 + wheel / 2;
[... do some action on canvas ...]
};
可悲的是,这在Firefox中不起作用。根据{{3}}:
由于遗留事件,Gecko没有计划实施此事件 类型和非标准。
如何让我的代码适用于Chrome和Firefox?
编辑:完整代码为MDN(一个文件,大约550 LOC)
答案 0 :(得分:2)
您可以尝试以下链接
从页面: onmousewheel event and Firefox's equivalent
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)
答案 1 :(得分:0)
我遇到了这个问题,我根据浏览器编写代码来使用不同的事件。当然jQuery或其他框架可以很容易地做到,但我是一个Vanilla Javascript程序员。
对于chrome: onmousewheel 和 document.body.scrollTop 有效。
对于firefox: onscroll 和 event.pageY 也会这样做。
if( Browser.chrome){
window.onmousewheel=function(e){
if( document.body.scrollTop > 60){
/* code to run on scrolled window */
} else {
/* code to run when on top */
}
};
} else {
window.onscroll=function(e){
if(e.pageY > 60){
/* code to run on scrolled window */
} else {
/* code to run when on top */
}
};
}