#removeEventListener #스크롤이벤트체크 #이벤트체크메소드 #약관동의 #스크롤

서비스를 개발하다보면 약관동의 같은 페이지를 개발할때가 있다. 약관은 내용이 많기 때문에 스크롤이 생기게 되는데 이럴때 removeEventListener 이벤트를 통해서 스크롤을 체크해볼수 있다. 

🌱 scrollTop : 스크롤바 내린 높이
🌱 scrollHeight : div  태그 실제 높이
🌱 clientHeight : 눈으로 확인되는 div 박스 높이 
🌱 실제 높이 : 스크롤 내린높이(scrollTop) + 눈으로 확인되는 div 박스 높이(clientHeight)
🌱 $div.scrollHeight = $div.scrollTop  + $div.clientHeight 

통상적으로 -5를 지정해서 스크롤 끝에서 5px정도 왔을때 체크를 하는것이 오차를 감안할수 있다.

🌱스크롤 감지 이벤트 

$("body").on("mousewheel", function (e) {
  var wheel = e.originalEvent.wheelDelta;

  if (wheel > 0) {
    //스크롤 올릴때
    console.log("올리는 중");
  } else {
    //스크롤 내릴때
    console.log("내리는 중");
  }
});

🌱스크롤 이벤트

let infoConrim = document.querySelector("#info_container");
	
	const checkEvent = () => {
		
		infoConrim.addEventListener('scroll', function () {
			
		    if (infoConrim.clientHeight + infoConrim.scrollTop >= infoConrim.scrollHeight - 5) {
		      alert('약관을 다 읽으셨습니다');
		      document.querySelector(".button_area").style.display="";
		      infoConrim.removeEventListener('scroll', arguments.callee);
		    }    
		    
		});
		
	}
    
  //arguments.callee는 익명함수 자체를 가리킨다고 한다.