퍼블리싱/HTML | CSS | Javascript
window가 아닌 div의 스크롤 끝 감지 이벤트
publisher.kim
2023. 11. 28. 08:44
$(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>
728x90