JS - 스크롤이벤트 숙제 & 페이지 스크롤 응용

문제1. 페이지 스크롤바 100px 내리면 로고 폰트 사이즈 작게 만들기

<script>
$(window).on("scroll", function () {
	if (window.scrollY > 100) {
		$(".navbar-brand").css("font-size", "20px");
	} else {
		$(".navbar-brand").css("font-size", "30px");
	}
});
</script>

문제2. 회원약관 박스 거의 끝까지 스크롤하면 alert창 띄우기

<script>
$('.lorem').on('scroll', function(){
  let 스크롤양 = document.querySelector('.lorem').scrollTop;
  let 실제높이 = document.querySelector('.lorem').scrollHeight;
  let 높이 = document.querySelector('.lorem').clientHeight;
  if (스크롤양 + 높이 > 실제높이 - 5) {
    alert('다읽음')
  }
});
</script>

바닥에서 ~5px 위치에 스크롤 바가 있을 때 alert를 띄워준다

scroll 다룰 때 주의점

1. scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행된다
   -> 너무 많이 쓰면 안댐
2. 여러번 실행될 수 있어서 바닥체크를 여러번 중복으로 해줘야한다

현재 페이지 끝까지의 스크롤 체크 방법

html태그의 길이를 구하면 된다

document.querySelector('html').scrollHeight // 현재 페이지 실제 높이
document.querySelector('html').clientHeight // 페이지 보이는 부분 높이
window.scrollY // 현재 스크롤 양 

html에 붙이는 scrollHeight는 페이지 로드 완료 시 실행해야 정확함