front-end/JavaScript

스크롤 맨 아래 감지 제이쿼리

이안_ian 2023. 2. 21. 09:58
반응형

무한 스크롤에서 사용되는, 스크롤이 맨 아래로 왔을 때 moreData를 호출하는 로직


$(document).ready(function(){
  //window는 "#searchPopup"등 으로 스크롤 주체로 변경가능
  $(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    var innerHeight = $(this).innerHeight();
    var scrollHeight = $(this).prop('scrollHeight');
    
    if(scrollTop + innerHeight >= scrollHeight) {
      moreData();
    }
  });
});


스크롤 주체가 어떤 영역인지 모를땐,

스크롤을 내리면서
$('#searchPopup').scrollTop(); 를 사용해보면
값이 변하는게 스크롤 주체다.

반응형