jquery detects whether the scroll bar reaches the bottom _jquery

First, jquery detection browser window scroll bar to reach the bottom
jquery get location and dimension related functions:
$ (document). Height () to get the entire page
$ (window). Height () Gets the height of the portion of the page that is currently visible to the browser. This size changes when you zoom in on the browser window, not the same as the document.
scrolltop () gets the offset of the matching element relative to the top of the scroll bar.
scrollleft () gets the offset of the matching element relative to the left side of the scroll bar.
scroll ([[[DATA],FN]) violates scroll event when scroll bar changes
jquery detection scroll bar arrives at bottom code:

$ (document). Ready (function () {
  $ (window). Scroll (function () {
 
    if ($ (document). ScrollTop () <=0) {
      Alert ("Scroll bar has reached top of 0");
    }
 
    if ($ (document). ScrollTop () >= $ (document). Height ()-$ (window). Height ()) {
      alert ("The scroll bar has reached the bottom as" + $ (document). ScrollTop ());}};

Second, jquery detection div scroll bar to reach the bottom
The previous section introduces the jquery detection browser window scroll bar to the bottom, actually does not understand the scrolltop and scrollheight concepts, usually the scroll bar is placed in the Div.

The following detection ID is the SCROLL_DIV scroll bar to the bottom event:

<div id= "Scroll_div" style= "Overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid Red ">
      <div style=" height:10000px ">
        From the www.jb51.net cloud-Habitat community <br>
        from the www.jb51.net cloud-Habitat community <br>
        from www.jb51.net cloud-Habitat community <br>
      </div >
    </div>

There are several concepts that need to be understood first:
ScrollHeight: Indicates the height that the scroll bar needs to scroll, that is, the internal div,10000px
ScrollTop: Indicates the height of the scroll bar scrolling, possibly greater than the outer div 500px
That is to say, the height of the Scrolldiv +scrolltop the maximum height of the scroll =scrollheight
So it's easy to detect the div scroll bar height in div:

$ (document). Ready (function () {
  $ ("#scroll_div"). Scroll (function () {
    var divheight = $ (this). Height ();
    var nscrollheight = $ (this) [0].scrollheight;
    var nscrolltop = $ (this) [0].scrolltop;
    $ ("#input1"). Val (nscrollheight);
    $ ("#input2"). Val (nscrolltop);
    $ ("#input3"). Val (divheight);
    if (nscrolltop + divheight >= nscrollheight) {
      alert ("reached bottom");}
  });

If the data is loaded asynchronously, the data is not loaded, and the data loading request for the same page is violated, I usually add a flag

$ (document). Ready (function () {
  var flag = false;
  $ ("#scroll_div"). Scroll (function () {
    
    if (flag) {
      //Data load return
      false;
    }
    
    var divheight = $ (this). Height ();
    var nscrollheight = $ (this) [0].scrollheight;
    var nscrolltop = $ (this) [0].scrolltop;
    $ ("#input1"). Val (nscrollheight);
    $ ("#input2"). Val (nscrolltop);
    $ ("#input3"). Val (divheight);
    if (nscrolltop + divheight >= nscrollheight) {
      //request data
      flag = true;
      Alert ("reached bottom");}});