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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
5.PHP的其他功能
2006/10/09 PHP
用PHP发电子邮件
2006/10/09 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
会计实习生自我鉴定
2013/12/12 职场文书
机关单位动员会主持词
2014/03/20 职场文书
房屋出租协议书
2014/04/10 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
志愿者事迹材料
2014/12/26 职场文书
2016公司年会通知范文
2015/04/25 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
爱国主义电影观后感
2015/06/18 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
试了下Golang实现try catch的方法
2021/07/01 Golang
python如何读取和存储dict()与.json格式文件
2022/06/25 Python