JavaScript 스크롤 이벤트

1. 스크롤 이벤트 리스너

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

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

---

2. 스크롤 관련 유용한 기능들

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

• window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤 했는지 px 단위로 알려줌
• window.scrollX 사용하면 가로로 얼마나 스크롤 했는지 알려줌

window.scrollTo(0, 100);

• window.scrollTo(x, y) 실행하면 강제로 스크롤바를 움직일 수 있음.
• 위 코드는 위에서부터 100px 위치로 스크롤 해줌

window.scrollBy(0, 100);

• window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤 해줌
• 위 코드는 현재 위치에서부터 +100px 만큼 스크롤 해줌

bootstrap을 설치했을 경우 스크롤이 천천히 이상하게 이동할 수 있는데 이럴때

:root {
    scroll-behavior: auto;
}

추가하면 됨.

---

3. div 박스 스크롤

1. div 박스의 스크롤바 내린 양
   • 박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서부터 얼마나 내렸는지 알려줌
   • 스크롤바가 생긴 박스의 실제 높이, 박스에 스타일로 넣은 height: 100px 말고 스크롤 가능한 실제 높이는 .scrollHeight를 붙이면 나옴.
   • 박스에 스타일로 넣은 height: 100px의 높이를 구하려면, .clientHeight를 붙이면 나옴

<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>

<script>
      let loremBox = document.getElementsByClassName('lorem')[0];
      loremBox.addEventListener('scroll', function() {
        let 스크롤양 = document.querySelector('.lorem').scrollTop;
        let 박스높이 = document.querySelector('.lorem').clientHeight;
        let 실제높이 = document.querySelector('.lorem').scrollHeight;
        console.log(스크롤양, 박스높이);
        console.log(실제높이);
});
</script>