JS - 스크롤이벤트로 만드는 재밌는 기능들

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

.navbar {
  position : fixed;
  width : 100%;
  z-index : 5
}
.navbar-brand {
  font-size : 30px;
  transition : all 1s;
}

상단메뉴 고정 후 로고 폰트사이즈를 키운 채로 시작하기
스크롤바를 100px정도 내리면 폰트사이즈를 줄이기
-> 스크롤바를 얼마나 내렸는지 알아야한다

스크롤 이벤트리스너

window.addEventListener('scroll', function(){
  console.log('1')
});

-> window 에서 스크롤이 움직이면 console창에 1 띄우기

스크롤바를 조작하면 scroll 이벤트가 발생한다

스크롤 관련 유용한 기능들

window.addEventListener('scroll', function(){
  console.log( window.scrollY )
});

-> 현재 페이지를 얼마나 위에서부터 스크롤했는지 px단위로 알려줌
window.scollX : 가로로 얼마나 스크롤했는지

window.scrollTo(0, 100)

-> 강제로 스크롤바 x:0 y:100px 위치로 스크롤해줌

window.scrollBy(0, 100)

-> 현재 위치에서부터 스크롤해준다

원래는 실행 후 스크롤 위치가 순간이동 해야하는데 부트스트랩이 설치되어있으면 천천히 이동할 수 있음
이럴 땐 CSS에

 :root { scroll-behavior : auto }

추가해주면 해결완료!

jQuery버전

$(window).on('scroll', function(){
  $(window).scrollTop();
})

문제2. 박스 끝까지 스크롤 시 알림 띄우기

<div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem.
</div> 

회원약관인 박스를 끝까지 스크롤한다면 alert() 띄우고 싶어용~

코드짜는 방법!
div 스크롤바 내린 양 == div 실제높이일 경우 alert 띄워주세요~
위에서 배운건 "페이지 스크롤바"를 내린 양이고
지금의 경우는 "div 박스 스크롤바"를 내린 양이다

div 박스의 스크롤바 내린 양 구하기

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  console.log(스크롤양);
});

div박스를 셀렉터로 찾고 .scrollTop붙이면 스크롤바를 위에서부터 얼마나 내렸는지 알려줘용

div박스 높이 구하는법

스크롤 가능한 실제 높이 구하는 방법 : .scrollHeight

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  console.log(스크롤양, 실제높이);
});

문제2 다시 보기

div 스크롤 바 내린 양 == div 실제 높이일 경우
스크롤 바를 끝까지 내려도 스크롤 바 내린 양은 188.x
div 실제 높이는 288
같다고 비교하면 조금 이상하다
왜냐하면 스크롤 바 내린 양은 진짜 스크롤바를 내린 양이기 때문이다
(박스가 보이는 높이는 포함XX)

div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우 alert 띄워주세요~

이렇게 구하면 댐