programing

AJAX(jQuery)가 로드된 날짜의 디브 내부 무한 스크롤

iphone6s 2023. 9. 14. 21:50
반응형

AJAX(jQuery)가 로드된 날짜의 디브 내부 무한 스크롤

저는 SO에 대한 몇 가지 질문을 통해 이 문제를 해결하려고 노력해 왔습니다. 여러 가지 부분을 찾아내고 조립했지만, 이제는 포기하겠습니다.

내가 하려는 일은

사용자가 페이지에 있는 상태에서 jQuery .jax를 사용하여 div에 로드되는 콘텐츠 목록과 버튼을 클릭합니다.디브 하단으로 스크롤하면 더 많은 콘텐츠를 로드합니다.Twitter에서 볼 수 있듯이 이것은 디브 안에 있습니다.

스크롤에서 무한 로딩이 가능한 방법에 대한 예시를 보았지만 문제는 그 예시들이 페이지 전체를 다시 로드한다는 것입니다(보기).

내가 어떻게 이 일을 해낼 수 있는지 아는 사람?

말씀하신 것처럼 저는 정상적인 방법으로는 이를 달성할 수 없습니다.

페이지는 다음과 같이 작성됩니다.

1페이지는 사용자가 버튼을 클릭할 때까지 디브가 비어있습니다.

2페이지는 많은 내용을 로드합니다.사용자가 1페이지의 버튼을 클릭하면 div에 로드됩니다.

사용자가 div(자동으로 설정된 오버플로우가 있음)를 스크롤하고 div의 하단에서 종료되면 다음 페이지 정도를 로드해야 합니다.

미리 감사드립니다! :)

이것을 꽤 잘 해주는 플러그인이 몇 개 있습니다.

http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/

http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/

편집: 최신 플러그인:

https://github.com/fredwu/jquery-endless-scroll

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

JQuery.load() 메서드를 사용하여 일부 html 내용을 가져온 다음 html 요소에 삽입합니다.

Paul Irish의 무한 스크롤을 사용하는 경우 다음과 같이 무한 스크롤을 구현한 인수 중 하나로 바인더를 지정할 수 있습니다.

$('.mydiv').infinitescroll({
     binder: $(".name-of-div")  

바인더는 기본적으로 문서 창에 설정되어 있지만, 지정할 경우 페이지의 한 디브 안에서 무한 스크롤을 실행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/6311269/infinite-scrolling-inside-a-div-with-ajax-jquery-loaded-date

반응형