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> </div><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 in the browser window//Switch the entire screen after the mouse scrolls 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 by 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 by different browsers $(document.body).animate({scrollTop:0}, "fast");$(document.documentElement).animate({scrollTop:0}, "fast");}}; //Register event if(document.addEventListener){document.addEventListener('DOMMouseScroll',scrollFunc,false);}window.onmousewheel = document.onmousewheel = 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 one small grid and one small grid. This leads 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 roll 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){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, the code is now working normally, 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(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 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.