A window.onscroll approach to JavaScript

---restore content starts---

Today in the course of learning JavaScript was onscroll this thing for an afternoon. The mood is extremely depressed.

In a highly-larger web page, we usually add a button that returns to the top to facilitate user action.

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >div{height:300px;} #btn1 {position:fixed;bottom:0;right:0;} </style> <script type= "Text/javascript" >window.onload=function(){                varOdiv = document.getElementsByTagName (' div '); varOBTN = document.getElementById (' btn1 ')); varTimer =NULL; varOsys =true; vari = 0;  for(i = 0;i<odiv.length;i++)                {                    if(i%2 = = 0) {Odiv[i].style.background= ' Yellow '; }Else if(i%3 = = 0) {Odiv[i].style.background= ' Red '; }Else if(i%5 = = 0) {Odiv[i].style.background= ' Blue '; }Else{Odiv[i].style.background= ' Green '; }} Window.onscroll=function(){                    if(!Osys)                    {clearinterval (timer); } Osys=false; } Obtn.onclick=function() {Timer= SetInterval (function(){                                                varscrolltop = Document.documentElement.scrollTop | |Document.body.scrollTop; varIspeed = Math.floor (-SCROLLTOP/8); Osys =true; if(!scrolltop) clearinterval (timer); Document.documentElement.scrollTop= ScrollTop +Ispeed; },300)                                                    }            }        </script> 
To make so many div is purely to fill the height, in fact, it is not necessary to set a tall div enough, but then the brain is dead. The realization of the function is to click Back to the top button, the page can be a comfortable slow deceleration effect to move to the top. This creates a problem. If the page is long , the user clicks back to the top button, the page moves to the top of the process to stop (maybe find something interesting), how to stop the timer.
As you know, it is bound to trigger the Window.Scroll event when the page wants to move the top. If you want to stop after the triggering event, it's simple:
function () {     clearinterval (timer);          }
This way, the page stops automatically scrolling as long as the user drags the slider bar while the page returns to the top. But obviously, the function that returns to the top also triggers the Window.onscroll event, so that when we click Back to the top, the page moves up and stops. Because the timer was cleared.
So how do you get the browser to recognize whether the system is performing automatic scrolling of functions, or is the user doing it himself?
In the first code, we declare a variable: Osys, which is defined as true. Then we inserted it in the timer function (see Code yourself). This will initialize the value of Osys to true each time the timer executes the built-in function.
Combine the following code snippet:
function () {   false;    }
The effect is that when the function in the timer is executed, the value of the Osys variable is initialized to true. And once the function executes a scrolling statement, the Window.onscroll event is triggered, causing the value of Osys to become false? In order to test this conclusion, the following code
<! DOCTYPE html>varOsys =true; varOBTN = document.getElementById (' btn1 ')); Obtn.onclick=function() {setinterval (function(){                    varscrolltop = Document.documentElement.scrollTop | |Document.body.scrollTop; varIspeed = Math.floor (-SCROLLTOP/8);varOsys =true; if(scrolltop) {Document.documentElement.scrollTop= Document.body.scrollTop = ScrollTop +Ispeed;                    alert (Osys); }                                    },3000) Window.onscroll=function() {Osys=false; }            }        </script> </body>
It turns out that each popup is true. This shows that our inference above is wrong.
That means that the Window.onscroll event is triggered when the scroll is complete, not at the same time as scrolling. This also conforms to the logic in which the function executes sequentially: After the scrolling function completes, it enters the Window.onscroll trigger function. So you can be sure, Each time you enter the Window.onscroll function, the value of Osys is always true. When the Onscroll event is triggered, the function functions () {Osys = false} that are referenced by Onscroll are entered, and then the value of Osys is changed to false.
Let's say we add this piece of code
function () {    if(!  Osys)    {        clearinterval (timer);       }       false ;  }
When a cycle of a timer function is completed, and the Onscroll event function that is triggered is executed, the value of Osys must be false. If you enter the Onscroll event function again, there are two possibilities.
1. The timer function enters the next loop and initializes the value of Osys to true. After executing itself, the onscroll event is triggered, and the onscroll-triggered anonymous function is entered, and the value of Osys is true. Skips the IF statement and does not clear the timer.
2. The timer has not entered the next cycle, is the user manual operation triggered the Onscroll event function, then the value of Osys is not entered in the timer function inside the Osys initialization, so the value is still false. So it goes into the IF statement and clears the timer.
Understand it.
A window.onscroll approach to JavaScript