티스토리 뷰

 

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

 

 

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

무한 스크롤 기능을 구현하는데 있어 반드시 병행되어야 할 기능이 있습니다. 바로 무한 스크롤로 렌더링된 상품을 누르고 다시 [뒤로가기]를 했을 시 여전히 그 상품의 위치로 와야 한다는 것

kingofbackend.tistory.com

 

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

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

 

무한 스크롤 코드입니다.

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를 호출하는 스크롤의 기준 위치가 됩니다.

 

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

 

댓글
댓글쓰기 폼
공지사항
Total
248,427
Today
802
Yesterday
1,065
링크
«   2022/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
글 보관함