JS가 스크롤 막대를 페이지 밑으로 굴리고 이벤트를 실행하는 방법을 판단합니다

세 가지dom 요소를 알아야 하는데 그것이 바로clientHeight,offsetHeight,scrollTop이다.
clientHeight: 이 요소의 높이는 전체 공간의 높이를 차지하기 때문에 만약div에 스크롤 바가 있다면, 이 높이는 스크롤 바가 표시되지 않은 아래 부분의 내용을 포함하지 않습니다.단순한 DIV의 높이입니다.
offsetHeight: 요소 내용의 높이를 나타냅니다.위에 있는 대로 이 높이는 DIV 내부의 높이입니다. 보이는 부분과 스크롤 막대 아래의 보이지 않는 부분을 포함합니다.
스크롤 탑: 이게 뭘까요?그는 롤러가 굴러갈 수 있는 길이로 이해할 수 있다.
예를 들어 만약에 DIV 높이가 400px(즉clientHeight는 400)이고 그 안의 내용은 매우 긴 목록이며 내용의 높이는 1000px(즉offsetHeight는 1000)이다.그러면 보이는 부분은 400px, 1000px의 내용 중 600px를 볼 수 없습니다.이 보이지 않는 부분은 바로 우리가 롤러를 당겨야만 이 부분을 나타낼 수 있다.스크롤 막대가 움직이지 않으면 스크롤 탑이 0이고, 스크롤 막대를 끝까지 당기면 목록의 맨 아래 부분을 표시합니다. 이때 스크롤 탑은 600입니다.그래서 scrollTop의 수치 구간은 [0,600]이다.그래서 이 600은 스크롤 바가 스크롤할 수 있는 길이로 이해할 수 있다.
위의 이 개념을 이해한 후에끝까지 굴러갈지 안 굴러갈지 판단하면 돼.
우선, 우리는 롤러를 당겨서 맨 위에서 맨 아래로 당긴다. 변화하는 것은 scroll Top의 값이고 이 값은 하나의 구간이 있다.
이 구간은: [0, (offset Height - client Height)]
즉, 스크롤 막대가 당겨지는 전체 과정의 변화는 0에서 (offset Height C client Height) 범위 내에 있다.
1. 판단 스크롤 막대가 맨 아래로 굴러간다: scrollTop = = (offsetHeight C clientHeight)
2. 스크롤 막대 거리 하단 50px 이내: (offsetHeight C clientHeight) C scrollTop <= 50
3. 스크롤 막대 거리 하단 5% 이내: scrollTop/(offsetHeight C 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 , 

        //  ..

        }

     });

}

PS: 여기에서 JS 이벤트에 대한 온라인 조회 도구를 추천합니다. JS가 자주 사용하는 이벤트 유형과 함수 기능을 요약했습니다.
javascript 이벤트 및 기능 설명 전체:
http://tools.jb51.net/table/javascript_event