jquery가 스크롤 막대가 페이지 하단으로 스크롤되었는지 확인하고 event_jquery를 실행하는 방법에 대한 간략한 분석

이 기사에서는 jquery가 스크롤 막대가 페이지 하단에 도달한 시기를 결정하고 이벤트를 실행하는 방법을 프로그래머에게 소개합니다. 먼저 세 가지 dom 요소, 즉 clientHeight, offsetHeight 및 scrollTop을 이해하세요.

먼저 세 가지 DOM 요소, 즉 clientHeight, offsetHeight 및 scrollTop을 이해하세요.

clientHeight: 이 요소의 높이는 전체 공간의 높이를 차지합니다. 따라서 div에 스크롤 막대가 있는 경우 높이에는 스크롤 막대가 포함되지 않습니다. 아래 내용이 표시되지 않습니다. 그것은 단지 DIV의 높이입니다.

offsetHeight: 은 요소 콘텐츠의 높이를 나타냅니다. 위의 내용에 따르면 이 높이는 스크롤 막대 아래에 보이는 부분과 보이지 않는 부분을 포함한 DIV 내부의 높이입니다.

scrollTop: 이게 뭐죠? 스크롤 막대가 스크롤할 수 있는 길이로 이해될 수 있습니다.

예를 들어 DIV의 높이가 400px(즉, clientHeight가 400)이고 내부 콘텐츠가 긴 목록인 경우 콘텐츠의 높이는 1000px(즉, offsetHeight는 1000)입니다. 따라서 보이는 부분에는 400px가 보이고, 1000px 콘텐츠에는 여전히 600px가 보이지 않습니다. 보이지 않는 부분은 스크롤바를 당겨서 표시할 수 있습니다. 스크롤바를 끌어당기지 않으면 이때 scrollTop은 0이 되고, 스크롤바를 아래쪽으로 끌어서 목록의 아래쪽 부분이 표시되면 scrollTop은 600이 됩니다. 따라서 scrollTop의 값 범위는 [0, 600]입니다. 따라서 이 600은 스크롤 막대가 스크롤할 수 있는 길이로 이해될 수 있습니다.

위 개념을 이해하신 후. 아래쪽으로 스크롤할지 여부를 결정하는 것은 쉽습니다.

먼저 스크롤 막대를 위에서 아래로 당깁니다. 변경되는 것은 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时,加载新内容
    // 这里加载数据..
    }
   });
}

위 글은 스크롤 바가 페이지 하단으로 스크롤되는 시점을 jquery가 어떻게 판단하고 이벤트를 실행하는지 간략하게 분석한 내용입니다. 이는 모두 편집자가 공유한 내용이며, 참고가 되셨으면 좋겠습니다. Script Home을 더 많이 지원하게 될 것입니다.