ClientHeight, OffesTheight, ScrollTop의 세 가지 DOM 요소, 즉 세 가지 DOM 요소를 이해해야합니다.
ClientHeight :이 요소의 높이는 전체 공간의 높이를 차지합니다. 따라서 DIV에 스크롤 막대가있는 경우 해당 높이에는 스크롤 막대에 표시되지 않은 다음 부분의 내용이 포함되지 않습니다. 그리고 그것은 단지 div의 높이입니다.
Offestheight : 요소 내용의 높이를 나타냅니다. 위의 내용에 따르면,이 높이는이 높이는 가시 부분과 스크롤 막대 아래의 보이지 않는 부분을 포함하여 DIV 내부의 높이입니다.
스크롤 탑 :이게 뭐야? 스크롤 할 수있는 스크롤 막대의 길이로 이해할 수 있습니다.
예를 들어, div 높이가 400px (즉, 클라이언트 호는 400)이고 내부의 컨텐츠는 매우 긴 목록이고 컨텐츠 높이는 1000px (즉, Offestheight는 1000)입니다. 따라서 가시 부분에서는 400px 및 1000px 컨텐츠가 여전히 600px가 보이지 않습니다. 그리고이 보이지 않는 부분은 스크롤 막대를 당겨서 보여줄 수있는 것입니다. 스크롤 바가 당기지 않으면 스크롤 탑은 현재 0입니다. 스크롤 바를 하단으로 당기면 목록의 하단 부분이 표시됩니다. 현재 스크롤 탑은 600이므로 스크롤 탑의 값 간격은 [0, 600]입니다. 따라서이 600은 스크롤 할 수있는 스크롤 막대의 길이로 이해 될 수 있습니다.
위의 개념을 이해 한 후. 바닥으로 스크롤하는지 쉽게 알 수 있습니다.
먼저, 스크롤 바를 당기고 상단에서 하단으로 당기고 변경 사항은 스크롤 탑의 값 이며이 값은 간격이 있습니다.
이 간격은 다음과 같습니다.
즉, 스크롤 막대의 전체 프로세스는 0에서 0에서 (OffesTheyight ClientHeight) 범위 내에서 변경됩니다.
1. 스크롤 바 스크롤이 하단으로 판단 : ScrollTop == (OffSetheight ClientHeight)
2. 스크롤 막대의 하단 끝에서 50px 이내 : (OffesTheyight ClientHeight) ScrollTop <= 50
3. 바닥에서 스크롤 막대의 거리의 5% 이내 : ScrollTop / (OffSetheight ClientHeight)> = 0.95
위와 같이.
하단으로 끌어 당기려면 자동으로 컨텐츠를로드하십시오. 스크롤바 이벤트를 등록하기 만하면됩니다.
코드 사본은 다음과 같습니다.
scrollbottomtest = function () {
$ ( "#contain"). 스크롤 (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.vevb.com/table/javaScript_event