[ 무한스크롤 구현 (스크롤 마지막을 인식하는 이벤트 처리) ]
페이스북같은 SNS 사이트를 보면, 스크롤이 끝부분에 위치하면 추가적으로 데이터(글)들이 나오는 것을 알 수 있다.
이처럼 처음부터 다 나오는 것이 아니라 스크롤 끝에 갔을 때 특정 작업을 하려면
다음과 같이하면 된다.
$(window).scroll(function() { // 스크롤 이벤트가 발생할 때마다 인식
// 스크롤이 끝에 닿음을 인식
if ( $(window).scrollTop() == $(document).height() - $(window).height() ) {
}
});
이처럼 작업해주면 되는데
이렇게 스크롤이 끝에 닿음을 인식할 때마다, PagingDTO등을 이용해서 다음 페이지 값을 불러오도록 처리해 주는 것과 연게하면
페이징처리를 이용한 무한스크롤을 구현할 수 있다.
위의 코드에서 listAll(page,keywords) 부분이 page를 넘기고 끝에 닿을 때마다 페이지를 ++해서 다음페이지를 불러오도록 하는 부분이다.
listAll 등의 함수에 대해 추가적으로 필요하신 분들은 요청시 코드 드리겠습니다.
'개발 > Javascript' 카테고리의 다른 글
| 동적으로 생성된 태그에 이벤트를 걸려면 어떻게 해야할까?? (1) | 2017.06.11 |
|---|---|
| 클릭시 특정 태그 위치로 스크롤을 이동시키기 (1) | 2017.06.11 |
| 이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기 (0) | 2017.06.11 |
| JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop) (0) | 2017.06.11 |
| 4. script 선언의 위치?!! (0) | 2017.06.11 |