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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
shiro授权的实现原理
Sep 21 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
tagName的使用,留一笔
2006/06/26 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
深入了解python列表(LIST)
2020/06/08 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
C语言编程题
2015/03/09 面试题
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
教师求职自荐书
2014/06/14 职场文书
班主任工作总结范文
2015/08/13 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers