Home>

Roll the mouse wheel between the first screen and the second screen to level the switching effect.Encountered many problems,Here is the solution

I want to make a switch between the first screen and the second screen to smooth the switching effect.Encountered many problems,Later, with the help of kk,Finally solved the problem,Very happy,So record it:

My initial code was 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></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script src="../jquery/jquery.min.js"></script>
<script src="test.js"></script>
</html>
$(document) .ready (function () {
var height=$(window) .height ();//Get the size of the currently visible area of ​​the browser window
//The whole screen is switched after the mouse is scrolled
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) {//Scroll down in different browsers
$(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) {//Scroll up in different browsers
$(document.body) .animate ({scrolltop:0}, "fast");
$(document.documentelement) .animate ({scrolltop:0}, "fast");
}
};
    //Registration issue
if (document.addeventlistener) {
document.addeventlistener ("dommousescroll", scrollfunc, false);
}
window.onmousewheel=document.onmousewheel=scrollfunc;//ie, chrome, safira
});

This kind of code is normal in both IE and Firefox.But the onmousewheel event under Google always triggers multiple times,This is an extremely annoying thing,Why is it triggered multiple times?After debugging,What I found was that every time we scrolled the mouse, we were very "ferocious" and we scrolled a large amount at a time.Instead of slowly scrolling from cell to cell,This causes the onmousewheel event to be triggered multiple times during scrolling, and the scrollfunc function is called. The animate function in the function is continuously called when it has not been executed.In this case, the scroll bar cannot scroll down multiple times and the page cannot scroll up.So, I changed the above js code to the following:

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

OK, now the code is working properly,But since I am a novice,The code is not delicate enough,Kk said again, at his prompt,I modified the redundant code again:

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

Finally got the introduction code,have to say,By solving this problem,Still learn a lot.I will work harder towards the goal of "write less, do more" in the future! !! !!

  • Previous C # example of three ways to pass parameters to multiple threads
  • Next Simple understanding of the pynotify package for monitoring file systems under Python