스크롤이 끝나면 alert 띄우기 - removeEventListener

[코딩애플 JavaScript 입문과 웹 UI개발] 강의 수강 후 배운 것을 정리한 것입니다.
https://codingapple.com/course/javascript-jquery-ui/

 

스크롤바 내린 높이 : scrollTop
div 박스의 실제 높이 : scrollHeight
눈에보이는 div 박스의 높이 : clientHeight

실제 높이 = 스크롤 내린높이 + 눈에보이는 눈에보이는 div 박스의 높이 

$div.scrollHeight = $div.scrollTop  + $div.clientHeight 

가 되면 스크롤이 전부 내려왔다는 뜻이다.

 

 

스크롤이 다 내려왔을때 alert를 띄우는 javascript 코드는 다음과 같다.

( -5는 오차를 감안한 것이다.. 완전히 스크롤 끝까지 닿지않고 스크롤 끝에서 5px정도 떨어져도 약관을 다 읽었다고 보는 것..)

let $lorem = document.querySelector('.lorem');

$lorem.addEventListener('scroll', function () {
    if ($lorem.clientHeight + $lorem.scrollTop >= $lorem.scrollHeight - 5) {
      alert('약관을 다 읽으셨습니다');
      $lorem.removeEventListener('scroll', arguments.callee);
    }
});

 

여기서 arguments.callee는 익명함수 자체를 가리킨다고 한다.

익명함수를 따로 빼준 다음에  $lorem.removeEventListener('scroll', 함수명) 해줘도된다.

  function alertEnd() {
    if ($lorem.clientHeight + $lorem.scrollTop >= $lorem.scrollHeight - 5) {
      alert('약관을 다 읽으셨습니다');
      $lorem.removeEventListener('scroll', alertEnd);
    }
  }
  $lorem.addEventListener('scroll', alertEnd);

arguments.callee를 사용하는 전자가 더 간편하다.

 

 

removeEventListner를 몰랐을 때는 전역변수 readOnce를 false로선언해놓고,

if 문에 (!readOnce && 라는 조건을 추가해 준 뒤에 alert뒤에 readOnce 를 true로 바꾸는 로직을 사용했다.

removeEventListner를 사용하는 것이 더 나은것 같다. 

 

 

 

[출처 및 참고]

https://ko.javascript.info/size-and-scroll-window

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollHeight

https://inpa.tistory.com/entry/JS-📚-이벤트-제거-한번만-실행되게-하기-removeEventListener-once
        

 

See the Pen scroll by JEONG (@cona) on CodePen.