jQuery detects whether scroll bar reaches bottom_jquery

1. jQuery detects that the browser window scroll bar reaches the bottom
jQuery gets position and size related functions:
$(document).height() Get the height of the entire page
$(window).height() Get the current height of the part of the page that the browser can see. This size will change when you resize the browser window, which is different from 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]) The scroll event is triggered when the scroll bar changes
jQuery detects when the scroll bar reaches the bottom code:

$(document).ready(function() {
  $(window).scroll(function() {
 
    if ($(document).scrollTop()<=0){
      alert("滚动条已经到达顶部为0");
    }
 
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
      alert("滚动条已经到达底部为" + $(document).scrollTop());
    }
  });
});

2. jQuery detects that the scroll bar in the div reaches the bottom
The first half of the article introduced jQuery's detection of the browser window scroll bar reaching the bottom. In fact, I still don't understand the concepts of scrollTop and scrollHeight. Usually the scroll bar is placed in a div.

Detect the scroll bar reaching the bottom event with id scroll_div as follows:

<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red">
      <div style="height:10000px">
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
      </div>
    </div>

First you need to understand a few concepts:
scrollHeight: Indicates the height that the scroll bar needs to be scrolled, that is, the internal div, 10000px
scrollTop: indicates the height of the scroll bar, which may be greater than the outer div 500px
That is to say, the height of scrollDiv + the maximum height of scrollTop = scrollHeight
So detecting the height of the div scroll bar in the div is simple:

$(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("到达底部了");
    }
  });
});

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

$(document).ready(function() {
  var flag = false;
  $("#scroll_div").scroll(function(){
    
    if(flag){
      //数据加载中
      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) {
      //请求数据
      flag = true;
      alert("到达底部了");
    }
  });
});