Rumah > Artikel > hujung hadapan web > js acara onmousewheel mencetuskan beberapa kali kemahiran solution_javascript masalah

js acara onmousewheel mencetuskan beberapa kali kemahiran solution_javascript masalah

WBOYasal: 2016-05-16 16:33:241343semak imbas

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>

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

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

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

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bermula dengan kaedah sup JavaScript (memaparkan rentetan sebagai superskrip)_Pengetahuan asasArtikel seterusnya：Bermula dengan kaedah sup JavaScript (memaparkan rentetan sebagai superskrip)_Pengetahuan asas

Artikel berkaitan

Lihat lagi