How to determine whether the scroll bar reaches the bottom in jquery

How jquery determines whether the scroll bar reaches the bottom: 1. Use the [scrollTop()] method, and jQuery detects that the browser window scroll bar reaches the bottom; 2. Use [scroll_div] to detect the event that the moving bar reaches the bottom.

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, thinkpad t480 computer.

How jquery determines whether the scroll bar has reached the bottom:

1. jQuery detects that the browser window scroll bar has reached the bottom

jQuery Get 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 document

• scrollTop() Get 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 Code for detecting the scroll bar reaching the bottom:

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

2. jQuery detecting the scroll bar in the div reaching the bottom

The first half introduced jQuery detecting the browser window scroll bar reaching the bottom , in fact, I still don’t understand the concepts of scrollTop and scrollHeight. Usually scroll bars are placed in divs.

The following detection ID is scroll_divThe scroll bar reaches 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">
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
      </div>
    </div>

First you need to understand a few concepts:

• scrollHeight: Indicates the height of the scroll bar that needs to be scrolled, that is, the inner div, 10000px

• scrollTop: Indicates the height of the scroll bar that needs to be scrolled, which may be greater than the outer div 500px

That is to say, the height of scrollDiv is the maximum height of scrollTop = scrollHeight

So it is simple to detect the height of the div scroll bar in the 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("到达底部了");
    }
  });
});

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

Related free learning recommendations: javascript(video)

The above is the detailed content of How to determine whether the scroll bar reaches the bottom in jquery. For more information, please follow other related articles on the PHP Chinese website!