jQuery는 스크롤 막대가 페이지 스크립트의 아래쪽으로 스크롤되었는지 여부를 결정합니다.-JS 튜토리얼-php.cn

jQuery는 스크롤 막대가 페이지 스크립트의 아래쪽으로 스크롤되었는지 여부를 결정합니다.

巴扎黑

풀어 주다： 2017-06-29 09:41:33

원래의

1425명이 탐색했습니다.

사실 매우 간단합니다. clientHeight, offsetHeight, scrollTop의 세 가지 매개변수만 사용하면 현재 위치를 확인할 수 있습니다.

예시, 맨 아래까지 판단

코드는 다음과 같습니다

$(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
        alert("哦哦,到底了.");
    }
});

로그인 후 복사

맨 아래로 당기고 싶다면자동으로 콘텐츠를 불러옵니다. 스크롤 막대 이벤트를 등록하세요.

먼저 스크롤 막대를 위에서 아래로 당깁니다. 변경되는 것은 scrollTop의 값이며 이 값에는 범위가 있습니다.
이 간격은 [0, (offsetHeight - clientHeight)]
즉, 스크롤바를 당기는 전체 과정의 변화는 0에서 (offsetHeight - clientHeight) 범위 내에 있습니다.

1. 스크롤 막대가 아래쪽으로 스크롤되었는지 확인: scrollTop == (offsetHeight – clientHeight)
2. 스크롤 막대가 아래쪽에서 50px 내에 있는 경우: (offsetHeight – clientHeight) – scrollTop <= 50
3 .스크롤바 하단의 5% 이내 : scrollTop / (offsetHeight – clientHeight) >= 0.95

코드는 다음과 같습니다

scrollBottomTest =function(){
     $("#contain").scroll(function(){
         var $this =$(this),
         viewH =$(this).height(),//可见高度
         contentH =$(this).get(0).scrollHeight,//内容高度
         scrollTop =$(this).scrollTop();//滚动高度
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
        // 这里加载数据..
        }
     });
}

로그인 후 복사

JS 판단

세로 스크롤바가 하단에 도달했는지 판단
명확히 한 후 위의 개념으로 코딩은 실제로 비교적 간단합니다. 다음은 샘플 코드입니다.

코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <title>下拉滚动条滚到底部了吗？</title>
      <script language="javascript" src="jquery-1.4.2.min.js"></script>
      <script language="javascript">
      $(document).ready(function (){
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0;   //滚动到的当前位置
        var nDivHight = $("#div1").height();
        $("#div1").scroll(function(){
          nScrollHight = $(this)[0].scrollHeight;
          nScrollTop = $(this)[0].scrollTop;
          if(nScrollTop + nDivHight >= nScrollHight)
            alert("滚动条到底部了");
          });
      });
      </script>
    <body>
    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
      <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
    </div>
    </body>
    </html>

로그인 후 복사

코드 설명:

내부 div의 높이는 750이고 외부 div의 높이는 입니다. 500이므로 수직 스크롤 막대는 맨 아래까지 도달하기 위해 750-500=250의 거리를 스크롤해야 합니다. nScrollTop + nDivHight >= nScrollHight 명령문을 참조하세요.
프로그램에서 외부 div의 스크롤 이벤트에서 ifjudgment 문을 감지하고 실행하면 CPU 리소스가 많이 소모됩니다. 마우스를 사용하여 스크롤 막대를 드래그하면 이 이벤트는 한 픽셀의 변화가 있는 한 트리거됩니다. 그러나 스크롤 막대 양쪽 끝에 있는 화살표를 클릭하면 이벤트가 훨씬 덜 자주 발생합니다. 따라서 스크롤 막대의 스크롤 이벤트는 주의해서 사용해야 합니다.
가로 스크롤바가 없을 때의 상황을 판단한 예시입니다. 가로 스크롤바가 있을 경우 상황이 살짝 달라지므로 nScrollTop + nDivHight >= nScrollHight 문에서는 ">="를 사용해야 합니다. 비교 연산자, 가로 스크롤 막대가 없으면 등호 "="로 충분합니다. 실제로 테스트해볼 수 있습니다. 가로 스크롤 막대가 끝까지 스크롤되었는지 여부도 확인할 수 있습니다.

위 내용은 jQuery는 스크롤 막대가 페이지 스크립트의 아래쪽으로 스크롤되었는지 여부를 결정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!