返回首页
当前位置: 主页 > 电脑应用 >

JSonmousewheel事件多次触发的问题解决方法

时间:2018-12-13 11:04
   我想在第一屏和第二屏之间做一个滚轴筛。它可以平滑交接。有许多问题。后来,在KK的帮助下,它终于解决了这个问题。

我的原始代码是这样的:







{ div
宽度:700px;
身高:1000px;
}
{红
背景颜色:红色;
}
{。黄
背景颜色:黄色;
}
















$(文档)Ready(函数(){)
var高度= $(窗口)(高度);获取浏览器窗口大小的当前可见区域。
在整个屏幕切换后,鼠标滚动
无功scrollfunc =功能(e){
VaR scrollTop = document.body.scrolltop document.documentelement.scrolltop | |;
E = e window.event | |;
如果((e.wheeldelta0)scrollTop > = 0 scrollTop <身高){ / /不同的浏览器滚动
$(文档。体)。动画({ scrollTop:高度},快);
$(文档。文档元素})。动画({ scrollTop:高度},快);
} else if(e.wheeldelta > 0 | |(e.detail =高度scrollTop < =高度+ 20){ / /浏览器滚动起来
$(文档。体)。动画({ 0 },scrollTop:快);
$(文档。文档元素})。动画({ 0 },scrollTop:快);
}
};
事件
如果(文件。addEventListener){
Document.addEventListener('dommousescroll ',scrollfunc,假);
}
window.onmousewheel = document.onmousewheel = scrollfunc; / / IE、Chrome、Safira
});





这样的代码是IE和Firefox下测试正常,但在谷歌,onmousewheel事件都会触发很多次。这是一件非常恼人的事。为什么我要触发很多次经过调试,我发现我们每一卷都一下子很暴力滚动一个大的振幅,而不是慢慢地滚动一小格小格,导致轧制时onmousewheel多触发事件,称scrollfunc功能,动画的功能在功能时不执行继续被称为反复滚动向下滚动页面,卷起这会出现。所以,我改变了上面的js代码如下:


$(文档)Ready(函数(){)
var高度= $(窗口)。Height();
无功scrollfunc =功能(e){
document.onmousewheel =定义;
VaR scrollTop = document.body.scrolltop document.documentelement.scrolltop | |;
E = e window.event | |;
如果((e.wheeldelta0)scrollTop > = 0 scrollTop <身高){
$(文档。体)。动画({ scrollTop:高度},快
document.onmousewheel = scrollfunc;
});
$(文档。文档元素})。动画({ scrollTop:高度},快
document.onmousewheel = scrollfunc;
});
} else if(e.wheeldelta > 0 | |(e.detail =高度scrollTop < =高度+ 20){
$(文档。体)。动画({ 0 },scrollTop:快
document.onmousewheel = scrollfunc;
});
$(文档。文档元素})。动画({ 0 },scrollTop:快
document.onmousewheel = scrollfunc;
});
}
};
如果(文件。addEventListener){
Document.addEventListener('dommousescroll ',scrollfunc,假);
}
document.onmousewheel = scrollfunc;
});



好了,现在代码已经可以正常运行了,但是因为我是新手,代码写得不好,KK也这么说。在他的提示下,我再次修改了冗余代码。


$(文档)Ready(函数(){)
var高度= $(窗口)。Height();
var宽度= $(窗口)。Width();
VaR的身体;
如果(navigator.useragent.indexof(火狐)> 0 | | navigator.useragent.indexof(MSIE)> 0){
身体= document.documentelement;
其他{ }
身体= document.body;
}
无功isfinish =真;
无功scrollfunc =功能(e){
如果(isfinish){
VaR scrollTop = body.scrolltop;
E = e window.event | |;
如果((e.wheeldelta0)scrollTop > = 0 scrollTop < height-20){
卷轴(高度);
} else if(e.wheeldelta > 0 | |(e.detail =高度scrollTop < =高度+ 20){
卷轴(0);
}
}

};
函数(高度){
isfinish = false;
$(体)。动画({ scrollTop:高度},快
isfinish =真;
});
};
如果(navigator.useragent.indexof(火狐)> 0){
如果(文件。addEventListener){
Document.addEventListener('dommousescroll ',scrollfunc,假);
}
其他{ }
document.onmousewheel = scrollfunc;
}
});


最后得到了代码的介绍,我不得不说,通过解决这个问题,我们还是学到了很多!!!!!

如果你有什么问题,欢迎上帝来教我,我会用我的心去学习。
------分隔线----------------------------
推荐内容