div의 스크롤 막대가 하단에 도달했는지 확인하기 위해 jquery로 작성된 메소드 [권장]

div의 스크롤 막대가 하단에 도달했는지 확인하기 위해 jquery로 작성된 메소드 [권장]_jquery

PHP中文网

풀어 주다： 2016-05-16 15:03:04

원래의

1757명이 탐색했습니다.

jQuery에는 스크롤 막대와 관련된 개념이 많이 있지만 스크롤 막대 드래그와 관련된 세 가지 속성, 즉 scrollTop, scrollLeft 및 scrollHeight가 있습니다. 그 중 인터넷에서 찾아볼 수 있는 scrollHeight 속성에 대한 응용 기술은 거의 없고 그냥 사용하면 됩니다.

이제 수직 스크롤과 관련된 scrollTop 및 scrollHeight 속성에 대해서만 논의합니다.

1. 스크롤 막대 속성에 대한 올바른 이해:

다음 HTML 코드가 있다고 가정합니다.

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
  <div style="height:750px;">
  </div>
</div>

로그인 후 복사

안쪽 p 태그의 높이가 바깥쪽 태그보다 길고, 바깥쪽 p 태그를 사용하면 세로 스크롤바가 자동으로 나타나기 때문에 브라우저로 열어보면 세로 스크롤바를 볼 수 있습니다. 스크롤 바를 일정 거리 아래로 드래그하면 나타나는 페이지 효과는 다음과 같습니다. (사진을 캡처한 후 오른쪽의 a와 b가 PS로 표시되어 있습니다.)

div의 스크롤 막대가 하단에 도달했는지 확인하기 위해 jquery로 작성된 메소드 [권장]_jquery

그럼 여기서 외부 p의 scrollTop 및 scrollHeight 속성은 무엇인가요?

어떤 사람들은 scrollTop이 그림에 표시된 a와 같다고 말합니다. scrollHeight는 외부 p의 높이인 500px와 같습니다. 사실, 그들 중 누구도 옳지 않습니다.

사실 그림에 표시된 a와 b는 우리가 js 코드를 프로그래밍하고 작성하는데 특별한 의미는 없습니다.

사실 js 코드에서는 스크롤바가 '포인트'로 추상화되어 있습니다. scrollHeight는 실제로 "스크롤 막대의 높이"(b)가 아니지만 스크롤 막대가 스크롤해야 하는 높이를 나타냅니다. 즉, 내부 p의 높이는 750px입니다. 그리고 scrollTop은 그림에 표시된 a가 아닌 스크롤 막대(점)의 현재 위치가 750px에서 차지하는 정도를 나타냅니다.

이때 우리는 Windows 디자이너들에게 깊은 인상을 받았습니다. 스크롤바 디자인은 너무 아름다워서 단순한 마우스 조작자들을 속였습니다. a와 b 사이의 거리는 각각 스크롤 막대가 스크롤된 거리와 스크롤해야 하는 거리를 식별합니다. 둘 사이에는 상응하는 관계가 있지만 이는 우리와 같은 애플리케이션을 개발하는 프로그래머가 고려하지 않는 프로그램입니다. 고려되는 운영 체제 구성원의 GUI 그래픽 인터페이스를 디자인합니다.

2 세로 스크롤바가 하단까지 도달했는지 확인

위의 개념을 명확히 하면 실제로 코딩은 비교적 간단합니다. 샘플 코드:

<!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" mce_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의 스크롤 이벤트에서 if 판단 문을 감지하고 실행하면 CPU 리소스가 많이 소모됩니다. 마우스를 사용하여 스크롤 막대를 드래그하면 이 이벤트는 한 픽셀의 변화가 있는 한 트리거됩니다. 그러나 스크롤 막대 양쪽 끝에 있는 화살표를 클릭하면 이벤트가 훨씬 덜 자주 발생합니다. 따라서 스크롤 막대의 스크롤 이벤트는 주의해서 사용해야 합니다.

가로 스크롤바가 없을 때의 상황을 판단하는 예시입니다. 가로 스크롤바가 있을 경우 상황이 조금씩 달라지므로 nScrollTop + nDivHight >= nScrollHight 문에서는 " >=" 비교 연산자이며 가로 스크롤 막대가 없으면 등호 "="로 충분합니다. 실제로 테스트해볼 수 있습니다. 가로 스크롤 막대가 끝까지 스크롤되었는지 여부도 확인할 수 있습니다.

위는 div 스크롤바가 하단에 도달했는지 판단하기 위해 jquery로 작성한 메소드입니다. [권장]_jquery 내용에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php)를 참고해주세요. .cn)!