欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js onmousewheel事件多次触发问题解决方法_javascript技巧

程序员文章站 2022-04-24 14:14:23
...
我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下:

我最初的代码是这样的:










$(document).ready(function(){
var height = $(window).height(); //获取浏览器窗口当前可见区域的大小
    //鼠标滚动之后整屏切换
var scrollFunc = function(e){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta0) && scrollTop>=0 && scrollTop0 || e.detail=height && scrollTop

这样的代码我在IE和火狐下测试都是正常的,但是在谷歌下onmousewheel事件总是会触发多次,这是一个极其恼人的事情,为什么会多次触发呢?经过调试,我发现是我们每次滚动鼠标时都是很“凶残”的一下子滚动很大一个幅度,而不是一小格一小格的慢慢滚动,这就导致了滚动的时候会多次触发onmousewheel事件,调用scrollFunc函数,在函数内的animate函数没有执行完的时候还是不断的被调用,这样就会出现滚动多次滚动条滚不下来页滚不上去的情况。于是,我将上面的js代码改成了下面这样:

$(document).ready(function(){
var height = $(window).height();
var scrollFunc = function(e){
document.onmousewheel = undefined;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta0) && scrollTop>=0 && scrollTop0 || e.detail=height && scrollTop

好了,现在的代码已经能够正常运行了,不过由于我是一只菜鸟,代码写的不够精致,又被kk说了,在他的提示下,我将冗余的代码又进行了一番修改:

$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var body;
if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){
body = document.documentElement;
}else{
body = document.body;
}
var isFinish = true;
var scrollFunc = function(e){
if(isFinish){
var scrollTop = body.scrollTop;
e = e || window.event;
if((e.wheelDelta0) && scrollTop>=0 && scrollTop0 || e.detail=height && scrollTop0){
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
}else{
document.onmousewheel = scrollFunc;
}
});

终于得到简介的代码了,不得不说,通过解决这个问题,还是学到很多的。以后要向着“write less, do more”的目标更加努力了!!!

如果有哪里写的不对的,欢迎各位大神们指教,我会虚心学习的。