jQuery는 스크롤 막대가 페이지 스크립트의 아래쪽으로 스크롤되었는지 여부를 결정합니다.
- 巴扎黑원래의
- 2017-06-29 09:41:331360검색
사실 매우 간단합니다. 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 3861dffb1c49154ac0961429e21b1cae= 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!