이미로드 된 div로 무한 스크롤

Question

그래서 내가 본 대부분의 무한 스크롤은 이미 페이지가 매겨진 요소와 관련이 있습니다. 기본적으로 ajax를 호출하여 다음 페이지를 호출하고 창이 중단 점에 도달하면이를 표시합니다.

페이지에 이미로드 된 100 개의 경량 div가있는 코드를 다루고 있지만, UI 용도로는 div를 스크롤 할 때 div를 모두 한꺼번에 표시하지 않고 지연로드하려고합니다. 기본 구조는 다음과 같습니다.

<div class="container"> 
    <div class="element"> 
    some other html 
    </div> 
    <div class="element"> 
    some other html 
    </div> 
    <div class="element"> 
    some other html 
    </div> 
    <div class="element"> 
    some other html 
    </div> 
    .... 100 times 
</div> 

간단한 방법이 있나요? jscroll 플러그인이 작동해야처럼 보이지만, 나는 다음과 JS하려고하면

$를 jscroll를(); ('컨테이너를.').

은 내가 전체 컨테이너의 마지막까지 게으른로드 기능을 구현하지 않으려는 생각하는 것 같다. 컨테이너 끝까지 도달하면 페이지가 충돌합니다. jscroll을 '요소'클래스에 바인딩하면 모든 지옥이 느슨해지며 분명히 내가 찾던 것이 아닙니다.

Answer 1

그래서 실제 콘텐츠 대신 자리 표시 자 div가 필요합니다. 스크롤바의 길이는 처음부터 최대치가되어야하며, div가 나타나면 내용을로드 할 것입니다.

그것은 당신이 각 사업부가 얼마나 높은 알고하는 것이 중요합니다, 다른 사람은 적당한 자리를 렌더링 할 수 있습니다.

있다면, 스크롤 리스너를 스크롤 컨테이너에 추가하십시오. 스크롤 할 때마다 자리 표시 자하는 div .scrollTop 및 height 위치 오프셋보고 (뷰포트에있는 div의 파악. 그런 다음 div에 대한 내용을로드.