[JavaScript] 무한 스크롤 기능 구현하기

 

무한 스크롤은 이커머스 관련된 웹이나 앱을 사용하면 쉽게 접할 수 있는 기능입니다. 스크롤의 위치가 어떠한 조건을 충족하게 되면 추가적으로 상품들을 불러옵니다. 

 

[JavaScript] 무한 스크롤 시 상품 위치 유지

 

그럼 어떻게 구현하는지 바로 알아보겠습니다.

스크롤이 특정위치로 가면 새로운 상품들을 계속해서 불러옵니다.

 

무한 스크롤 코드입니다.

var stopping = false;
var end = false;

$(window).scroll(function () {
        var cst = $(window).scrollTop();
        var csb = cst + $(window).height();

        var hooker = $('div').offset().top;
        if(hooker <= csb) {
            if(stopping === true || end === true) return false;

            var formData = $('form').serializeObject();
            sendAjaxPdtList(formData);//ajax 관련 사용자 함수

            stopping = true;
        } else {
            stopping = false;
        }
    });

$().scrollTop()은 셀렉터의 scrollTop 위치를 가져옵니다.

$().height()은 셀렉터의 높이를 가져옵니다.

$().offset()은 셀렉터의 좌표를 가져옵니다.

left는 필요없으니 top만 가져옵니다.

 

이렇게 스크롤에 필요한 값들을 가져온 뒤 if(hooker <= csb) 처럼 특정 조건을 만족하면 ajax를 호출하여 상품들을 새롭게 가져옵니다. hooker는 ajax를 호출하는 스크롤의 기준 위치가 됩니다.

 

이상 무한 스크롤에 대하 알아보았습니다.