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 validate.js表单验证的基本用法入门
May 13 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
分析javascript原型及原型链
Mar 18 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
微信小程序之数据绑定原理解析
Aug 14 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
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
看了就知道什么是JSON
2007/12/09 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Vue列表页渲染优化详解
2017/07/24 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
安全责任协议书
2014/04/21 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
鸡毛信观后感
2015/06/11 职场文书