window가 아닌 div의 스크롤 끝 감지 이벤트

$(document).ready(function() {
	$('.content').scroll( function() {
	  var elem = $('.content');
	 if ( elem[0].scrollHeight - elem.scrollTop() <= elem.outerHeight() + 20){
	     // 스크롤 끝 - 20보다 더 스크롤 했을때
	  } else {
		 // 스크롤 끝 - 20보다 적게 스크롤 했을때
	}
	});
})

 

여기서 elem.outerHieht() + 20의 값은 스크롤 완전 끝! 이 아닌 스크롤 끝에 도달하기 조금 전에 이벤트 작동하게 할때 사용.

보통 화면상 겹쳐지는 요소인 totop 버튼 등을 스크롤 끝에선 show, hide 할때 자주 사용.

 

 

+ window의 스크롤 끝 감지 이벤트

<script type="text/javascript">
   $(window).scroll(function(){
   if($(window).scrollTop() == $(document).height() - $(window).height()){
     console.log("스크롤 끝")
   } else {
     console.log("스크롤중...")
   }
  }); 
 </script>