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


Posted in Javascript onOctober 17, 2014

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

我最初的代码是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
div {
width: 700px;
height: 1000px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
</body>

<script src="../jQuery/jquery.min.js"></script>
<script src="test.js"></script>
</html>
$(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.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ //不同浏览器向下滚动 
$(document.body).animate({scrollTop:height}, "fast");
$(document.documentElement).animate({scrollTop:height}, "fast");
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){ //不同浏览器向上滚动
$(document.body).animate({scrollTop:0}, "fast");
$(document.documentElement).animate({scrollTop:0}, "fast");
}
};


//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira
});

这样的代码我在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.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ 
$(document.body).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
$(document.body).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}
};
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
document.onmousewheel = scrollFunc;
});

好了,现在的代码已经能够正常运行了,不过由于我是一只菜鸟,代码写的不够精致,又被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.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height-20){ 
scroll(height);
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
scroll(0);
}
}

};
var scroll = function(height){
isFinish = false;
$(body).animate({scrollTop:height},"fast","linear",function(){
isFinish = true;
});
};
if(navigator.userAgent.indexOf("Firefox")>0){
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
}else{
document.onmousewheel = scrollFunc;
}
});

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

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

Javascript 相关文章推荐
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
js实现飞入星星特效代码
Oct 17 #Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 #Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 #Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 #Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 #Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 #Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 #Javascript
You might like
php发送短信验证码完成注册功能
2015/11/24 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
js读取cookie方法总结
2014/10/31 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
会计专业自我鉴定范文
2013/10/06 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
运动会观后感
2015/06/09 职场文书
教师培训简讯
2015/07/20 职场文书
宣传部部长竞选稿
2015/11/21 职场文书