I wanted to make a scrolling mouse wheel between the first and second screens to level the switching effect. I encountered many problems. Later, with the help of kk, I finally solved this problem. I was very happy, so I recorded it:
My initial code looks like this:
<!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/"></script>
<script src=""></script>
</html>
$(document).ready(function(){
var height = $(window).height(); //Get the size of the currently visible area in the browser window//Switch the entire screen after scrollingvar scrollFunc = function(e){
var scrollTop = || ;
e = e || ;
if((<0|| >0) && scrollTop>=0 && scrollTop<height){ //Scroll down by different browsers$().animate({scrollTop:height}, "fast");
$().animate({scrollTop:height}, "fast");
}else if((>0 || <0) && scrollTop>=height && scrollTop<=height+20){ //Scroll up by different browsers$().animate({scrollTop:0}, "fast");
$().animate({scrollTop:0}, "fast");
}
};
//Register Eventif(){
('DOMMouseScroll',scrollFunc,false);
}
= = scrollFunc; //IE、chrome、safira
});
I tested such codes in IE and Firefox, but the onmousewheel event will always be triggered multiple times under Google. This is an extremely annoying thing. Why is it triggered multiple times? After debugging, I found that every time we scroll the mouse, we always scrolled a lot at a time, instead of scrolling slowly by small grids, which led to the onmousewheel event being triggered many times when scrolling, and the scrollFunc function is called. When the animate function in the function is not executed, it will be called continuously, so that the scrollbar cannot scroll down and the page cannot roll up. So, I changed the above js code to the following:
$(document).ready(function(){
var height = $(window).height();
var scrollFunc = function(e){
= undefined;
var scrollTop = || ;
e = e || ;
if((<0|| >0) && scrollTop>=0 && scrollTop<height){
$().animate({scrollTop:height}, "fast","linear",function(){
= scrollFunc;
});
$().animate({scrollTop:height}, "fast","linear",function(){
= scrollFunc;
});
}else if((>0 || <0) && scrollTop>=height && scrollTop<=height+20){
$().animate({scrollTop:0}, "fast","linear",function(){
= scrollFunc;
});
$().animate({scrollTop:0}, "fast","linear",function(){
= scrollFunc;
});
}
};
if(){
('DOMMouseScroll',scrollFunc,false);
}
= scrollFunc;
});
OK, the code can run normally now, but since I am a novices and the code is not written exquisitely enough, I was told by KK again. At his prompt, I modified the redundant code:
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var body;
if(("Firefox")>0 || ("MSIE")>0){
body = ;
}else{
body = ;
}
var isFinish = true;
var scrollFunc = function(e){
if(isFinish){
var scrollTop = ;
e = e || ;
if((<0|| >0) && scrollTop>=0 && scrollTop<height-20){
scroll(height);
}else if((>0 || <0) && scrollTop>=height && scrollTop<=height+20){
scroll(0);
}
}
};
var scroll = function(height){
isFinish = false;
$(body).animate({scrollTop:height},"fast","linear",function(){
isFinish = true;
});
};
if(("Firefox")>0){
if(){
('DOMMouseScroll',scrollFunc,false);
}
}else{
= scrollFunc;
}
});
Finally got the code for the introduction. I have to say that I have learned a lot by solving this problem. In the future, we must work harder toward the goal of "write less, do more"! ! !
If there is anything wrong with writing, please give me advice from all the masters, and I will learn humbly.