스크롤 막대가 페이지 하단까지 스크롤되었는지 확인하고 event_javascript 기술을 실행하는 JS 메서드

세 가지 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에 도달하면 새 콘텐츠를 로드합니다
//여기에 데이터를 로드합니다..
}
});
}