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 相关文章推荐
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python中的字典遍历备忘
2015/01/17 Python
Python程序中设置HTTP代理
2016/11/06 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python之生成多层json结构的实现
2020/02/27 Python
Python异常处理机制结构实例解析
2020/07/23 Python
幼儿园保育员辞职信
2014/01/12 职场文书
企业节能减排实施方案
2014/03/19 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
学习计划书怎么写
2014/09/15 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
七年级生物教学反思
2016/02/20 职场文书
开网店计划分析
2019/07/30 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android