如何在Chrome和Firefox中运行滚动事件
How can get a scroll event work in Chrome and Firefox?
我现在有一段代码:
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中不起作用。根据MDN:
由于遗留事件,Gecko没有实施此事件的计划类型和非标准。
如何让我的代码适用于Chrome和Firefox?
edit:完整的代码在这里(一个文件,大约550 LOC)
您可以尝试以下链接
从页面:onmousewheel事件和Firefox的等效
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)
我遇到了这个问题,我编写了代码来根据浏览器使用不同的事件。当然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 */
}
};
}
浏览器库位于http://software.sitesbr.net/utils/
相关文章:
- 向下滚动时运行javascript
- 我一直收到的控制台警告是什么?推迟长时间运行的计时器任务以提高滚动的流畅性
- 为什么我的修复菜单在滚动时无法顺利运行
- 在触发无限滚动时运行脚本
- 滚动事件运行缓慢-有没有更轻松的方法
- jQuery-在窗口滚动上运行一个函数,没有任何延迟
- window.onload 不运行分配的(滚动)函数
- 无限滚动 JavaScript 未运行
- 在填充运行时的表中添加无限滚动
- 当用户滚动到特定元素的末尾时,如何运行jQuery代码
- 滚动时运行脚本,但只能运行一次
- 错误“JavaScript 运行时错误:查找滚动位置时无法获取未定义或空引用的属性'scrollLeft'”
- 自动滚动到目标,iOS 中的 jQuery 运行得太远
- 是否可以在滚动到锚点时运行jQuery代码
- 如何通过滚动一次来运行jquery代码
- 页面满载后运行javascript自动滚动功能
- SmoothDivScroll's”;正在运行的股票代码“;只滚动一次
- 运行函数,禁用滚动,但在回调时启用
- 在“滚动”中设置脚本动画.它只运行一次
- 如何在Chrome和Firefox中运行滚动事件