jQuery는 스크롤 막대가 Bottom_jquery에 도달하는지 감지합니다.

1. jQuery는 브라우저 창 스크롤 막대가 하단에 도달했음을 감지합니다.
jQuery는 위치와 크기를 가져옵니다 관련 함수:
$(document).height() 전체 페이지의 높이를 구합니다
$(window).height() 브라우저가 볼 수 있는 페이지 부분의 현재 높이를 가져옵니다. 브라우저 창 크기를 조정하면 이 크기가 변경되므로 문서와 다릅니다
scrollTop() 스크롤 막대 상단을 기준으로 일치하는 요소의 오프셋을 가져옵니다.
scrollLeft() 스크롤 막대의 왼쪽을 기준으로 일치하는 요소의 오프셋을 가져옵니다.
scroll([[data],fn]) 스크롤 막대가 변경되면 스크롤 이벤트가 트리거됩니다
jQuery는 스크롤 막대가 하단 코드에 도달하는 시점을 감지합니다.

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

2. jQuery는 div의 스크롤 막대가 하단에 도달했음을 감지합니다.
기사의 전반부에서는 브라우저 창 스크롤 막대가 아래쪽에 도달하는 것을 감지하는 방법을 소개했습니다. 사실 저는 아직도 scrollTop과 scrollHeight의 개념을 이해하지 못합니다.

다음과 같이 ID가 scroll_div인 하단 이벤트에 도달하는 스크롤 막대를 감지합니다.

<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>

먼저 몇 가지 개념을 이해해야 합니다.
scrollHeight: 스크롤 막대를 스크롤해야 하는 높이, 즉 내부 div, 10000px을 나타냅니다
scrollTop: 스크롤 막대의 높이를 나타내며 외부 div 500px보다 클 수 있습니다
즉, scrollDiv의 높이와 scrollTop의 최대 높이 = scrollHeight
따라서 div에서 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("到达底部了");
    }
  });
});

비동기적으로 데이터를 로드하면 데이터가 완전히 로드되지 않고, 같은 페이지의 데이터 로드 요청을 위반하는 경우 보통 플래그를 추가합니다

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