스크롤 끝까지 내렸을때 이벤트 적용하기

아주 간단한 소스

 

See the Pen Untitled by publisher.kim (@publisherkim) on CodePen.

 

html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 스크롤 박스 -->
<div class="container">
  <!-- 스크롤 컨텐츠 -->
  <div class="content">
    컨텐츠
  </div>
</div>

 

css

.container{border:1px solid #ddd; height:300px; overflow-y:auto; box-sizing:border-box; padding:20px;}
.content{height:500px; background:#777; color:#fff;}

 

js *jquery필요

$(document).ready(function () {
  $(".container").scroll(function(){
    var containerSctop = $(".container").scrollTop();
    var containerHeight = $(".container").height();
    var contentHeight = $('.content').height();
    if(containerSctop + containerHeight >= contentHeight-1)     {
      alert("스크롤 끝까지 내림")
    }else{
    }
  })
})