jquery에서 스크롤 막대가 맨 아래에 도달했는지 확인하는 방법

jquery가 스크롤 막대가 아래쪽에 도달했는지 확인하는 방법: 1. [scrollTop()] 메서드를 사용하면 jQuery는 브라우저 창 스크롤 막대가 아래쪽에 도달했음을 감지합니다. 2. [scroll_div]를 사용하여 스크롤 막대가 아래쪽에 도달하는 이벤트를 감지합니다. 바가 바닥에 도달합니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, thinkpad t480 컴퓨터.

jquery가 스크롤 막대가 아래쪽에 도달했는지 확인하는 방법:

1. jQuery는 브라우저 창 스크롤 막대가 아래쪽에 도달했는지 감지합니다.

jQuery는 위치 및 크기 관련 기능을 가져옵니다.

• $(document) .height() 전체 페이지의 높이를 가져옵니다$(document).height()    获取整个页面的高度

• $(window).height()    获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的

• scrollTop()    获取匹配元素相对滚动条顶部的偏移。

• scrollLeft()    获取匹配元素相对滚动条左侧的偏移。

• scroll([[data],fn])    当滚动条发生变化时触犯scroll事件

jQuery检测滚动条到达底部代码：

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

二、jQuery检测div中滚动条到达底部

上半篇介绍了jQuery检测浏览器window滚动条到达底部，其实还并不理解scrollTop和scrollHeight概念，通常滚动条都是放在div中的。

如下检测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.php中文网.cn<br>
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
      </div>
    </div>

首先需要理解几个概念:

• scrollHeight:表示滚动条需要滚动的高度，即内部div，10000px

• scrollTop

$(window).height() 페이지의 현재 부분의 높이를 가져옵니다. 브라우저가 볼 수 있는 것입니다. 이 크기는 문서

scrollTop()과 다른 브라우저 창 크기를 조정할 때 변경됩니다. 스크롤 막대 상단을 기준으로 일치하는 요소의 오프셋을 가져옵니다.

scrollLeft() 스크롤 막대의 왼쪽을 기준으로 일치하는 요소의 오프셋을 가져옵니다.

scroll([[data],fn]) 스크롤 막대가 변경되면 스크롤 이벤트가 트리거됩니다.🎜🎜🎜🎜jQuery는 스크롤 막대가 하단 코드 🎜

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

🎜🎜에 도달했음을 감지합니다. 2. jQuery 감지 div의 스크롤 막대가 하단에 도달함🎜🎜🎜문서의 전반부에서는 브라우저 창 스크롤 막대가 하단에 도달하는 것을 감지하는 jQuery를 소개했습니다. 사실 일반적으로 scrollTop과 scrollHeight의 개념은 아직 이해되지 않았습니다. 스크롤 막대는 div에 배치됩니다. 🎜🎜다음은 ID가 scroll_div인 하단 이벤트에 도달하는 스크롤 막대를 감지합니다. 🎜

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

🎜우선 몇 가지 개념을 이해해야 합니다. 🎜🎜🎜🎜scrollHeight code>: 스크롤 막대를 스크롤해야 하는 높이, 즉 내부 div, 10000px🎜🎜🎜🎜<code>scrollTop: 스크롤 막대의 높이를 나타냅니다. 외부 div는 500px🎜🎜🎜🎜즉, scrollDiv의 높이 + scrollTop의 최대 높이 = scrollHeight🎜 🎜따라서 div에서 div 스크롤 막대의 높이를 감지하는 것은 간단합니다. 🎜rrreee🎜데이터가 비동기적으로 로드되고 데이터가 완전히 로드되지 않고 동일한 페이지의 데이터 로드 요청을 위반하므로 일반적으로 플래그를 추가합니다🎜rrreee🎜🎜관련 무료 학습 추천: 🎜javascript🎜(동영상)🎜🎜

위 내용은 jquery에서 스크롤 막대가 맨 아래에 도달했는지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!