js acara onmousewheel mencetuskan beberapa kali kemahiran solution

js acara onmousewheel mencetuskan beberapa kali kemahiran solution_javascript masalah

WBOY

Lepaskan： 2016-05-16 16:33:24

asal

1367 orang telah melayarinya

Saya ingin membuat kesan pensuisan yang lancar dengan melancarkan roda tetikus antara skrin pertama dan skrin kedua Saya menghadapi banyak masalah Kemudian, dengan bantuan kk, saya akhirnya menyelesaikan masalah itu Saya merakamnya satu klik:

Kod awal saya kelihatan seperti ini:

<!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>

Salin selepas log masuk

$(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
});

Salin selepas log masuk

Saya menguji kod ini biasanya di bawah IE dan Firefox, tetapi di bawah Google acara onmousewheel sentiasa mencetuskan beberapa kali Ini adalah perkara yang sangat menjengkelkan. Mengapakah ia mencetuskan beberapa kali? Selepas penyahpepijatan, saya mendapati bahawa setiap kali kami menatal tetikus, kami menatal dengan sangat "kejam" dengan jumlah yang besar sekali gus, bukannya menatal perlahan dalam petak kecil, yang membawa kepada beberapa kali apabila menatal Mencetuskan acara onmousewheel dan memanggil scrollFunc fungsi. Apabila fungsi animasi dalam fungsi belum dilaksanakan, ia masih dipanggil secara berterusan Dengan cara ini, akan berlaku situasi di mana bar skrol tidak boleh ditatal ke bawah selepas menatal beberapa kali dan halaman tidak boleh ditatal ke atas. Jadi, saya menukar kod js di atas kepada yang berikut:

$(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;
});

Salin selepas log masuk

Baiklah, kini kod boleh berjalan seperti biasa, tetapi kerana saya seorang pemula, kod itu tidak cukup diperhalusi, dan kk menyatakannya sekali lagi di bawah gesaannya, saya mengemas kini beberapa pengubahsuaian:

$(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;
}
});

Salin selepas log masuk

Saya akhirnya mendapat kod untuk pengenalan. Saya perlu mengatakan bahawa saya belajar banyak dengan menyelesaikan masalah ini. Saya akan bekerja lebih keras ke arah matlamat "kurangkan menulis, buat lebih banyak" pada masa hadapan! ! !

Jika ada apa-apa yang salah dengan apa yang saya tulis, anda dialu-alukan untuk memberi saya nasihat saya akan belajar daripadanya dengan fikiran terbuka.