스크롤 맨 아래 감지하기

안녕하세요.

오늘은 자바스크립트로 스크롤 맨 아래 감지하는 방법을 알아보겠습니다.

보통 모바일에서 스크롤 맨 아래에 왔을 경우 버튼을 활성화 시키거나 체크박스를 활성화 시킬 때 사용합니다.

 

일단 예제를 통해 설명해 드리겠습니다.

먼저 html은

---

<div class="mobile">
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
  <p>내용내용내용</p>
</div>

---

이렇게 작성을 해두고요

 

css

 

---

.mobile {overflow-y: auto; width: 300px;height: 100px;}

---

이렇게 작성해 주셔서 height 100px이 넘었을 경우스크롤이 생기도록 overflow-y:auto; 를 써줍니다.

 

javascript가 중요한데요

jquery의 scroll 이벤트를 적용시킬 겁니다.

 

---

$(".mobile").scroll(function(){

})

---

이렇게 작성해 주셔서 mobile 이라는 클래스가 스크롤 됐을 때 이벤트 발생하도록 해주고요

 

현재 위치의 scrollTop을 구해줍니다.

 

---

$(".mobile").scroll(function(){
 	var scrollTop = $(this).scrollTop();
});

---

scrollTop()은 현재 스크롤 영역의 가장 위의 위치 입니다.

처음은 0이 되고 스크롤 내릴수록 증가됩니다.

 

그다음 .mobile의 innerHeight를 구해줍니다.

---

$(".mobile").scroll(function(){
        var scrollTop = $(this).scrollTop();
        var innerHeight = $(this).innerHeight();
});

---

innerHeight()는 패딩값을 포함안 현재 .mobile의 높이를 말합니다.

 

그다음 scrollHeight()를 구해줍니다.

---

$(".mobile").scroll(function(){
        var scrollTop = $(this).scrollTop();
        var innerHeight = $(this).innerHeight();
        var scrollHeight = $(this).prop('scrollHeight');
});

---

scrollHeight()는 현재 .mobile의 스크롤된 모든 영역의 높이를 가지고 옵니다.

즉, 기존 높이에 보이지 않는 스크롤된 영역의 높이도 포함합니다.

 

마지막은 scrollTop()과 innerHeight() 값을 더해준 값이 scrollHeight()보다 같거다 크게되면 맨 아래를 감지할 수있습니다.

---

$(".mobile").scroll(function(){
        var scrollTop = $(this).scrollTop();
        var innerHeight = $(this).innerHeight();
        var scrollHeight = $(this).prop('scrollHeight');

        if (scrollTop + innerHeight >= scrollHeight) {
        $("#confirm").attr('disabled', false);
        } else {
        $("#confirm").attr('disabled', true);
        }
});

---

최종 완성된 코드는

 

See the Pen scroll bototm detect by juyeol (@juyeol) on CodePen.

 

감사합니다.