검색 결과 무한 스크롤

2020. 1. 7. 12:17언어/JS

728x90
반응형
SMALL
var list = 리스트;
var scrollTop;
var inerHeight;
var scrollHeight;
var timer;
list.scroll(function(){
	scrollTop = parseInt($(this).scrollTop());
    innerHeight = parseInt($(this).innerHeight());
    scrollHeight = parseInt($(this)[0].scrollHeight);
    if($(this).children().children("li").length > 0 && scrollTop + innerHeight >= scrollHeight-2){
    	if(timer)
        	clearTimeout(timer);
        timer = setTimeout(function(){
        	//0.2초 동안 스크롤 없으면 실행됩니다.
        }, 200);
    }
}

모바일에서는 기기마다 달라서 소수점으로 나오기 때문에 parseInt 필요.

scrollTop + innerHeight >= scrollHeight - 2 하면 무적권 바닥에 닿을 때 true.

 

숫자를 딱 맞춘 게 아니라서 여러번 실행 되기 때문에 if문 진입 후 0.2초 동안 다시 안들어 오면 실행.

 

728x90
반응형