사실 매우 간단합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!