JavaScript(스크롤 이벤트)

■ 스크롤 이벤트

스크롤 이벤트 리스너

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

// jQuery
$(window).on('scroll', function(){
  console.log('안녕')
})

이벤트리스너로 스크롤 조작 시 함수 설정을 할 수 있습니다.

window는 전체 페이지를 의미하며, document도 전체 페이지를 의미하지만 window가 조금 더 큰 개념입니다.

관습적으로 scroll 이벤트에서는 window를 붙입니다.

스크롤 이벤트리스너는 1초에 60번 이상 실행될 수 있으므로 성능저하가 일어날 수 있습니다.

스크롤바 1개마다 1개만 쓰는 것이 바람직합니다.

 

 

스크롤 관련 기능

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

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

위의 코드를 쓰면 가로로 얼마나 스크롤했는지 알 수 있습니다.

 

 

// js
window.scrollTo(0, 100) (x좌표, y좌표)

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

위의 코드를 쓰면 강제로 스크롤 해줍니다.

 

 

// js
window.scrollBy(0, 100)

// jQuery
$(window).scrollTop($(window).scrollTop() + 100);

위의 코드를 쓰면 현재 위치로부터 +100px 만큼 스크롤 해줍니다.

 

 

div 박스의 스크롤바 내린 양

div 박스를 만들고 스크롤바를 전부 내렸을 때 alert를 띄우려면 어떻게 해야할까요?

1. div 박스 만들기

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

overflow-y: scroll 은 사용자가 요소 내용을 세로 방향으로 스크롤하여 내용이 넘칠 경우

스크롤바가 표시되도록 하는 CSS 속성입니다.

 

2. 스크롤바 전부 내렸을 때 높이 구하기

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  var 보이는높이 = document.querySelector('.lorem').clientHeight;
  console.log(스크롤양, 실제높이, 보이는높이);
});
// 끝까지 내린 스크롤 양 + div 박스의 현재 보이는 높이 = div 박스의 실제 높이

scrollTop 를 사용하여 스크롤을 끝까지 내려 얼마나 스크롤 했는지 구할 수 있습니다.

scrollHeight 를 사용하여 div 박스의 실제 높이를 구할 수 있습니다.

clientHeight 를 사용하여 div 박스의 현재 보이는 높이를 구할 수 있습니다.

* 끝까지 내린 스크롤 양 + div 박스의 현재 보이는 높이 = div 박스의 실제 높이

* 여기서 스크롤 내린 양은 정수 단위로 나오지 않고 OS 마다 부정확하기 때문에 여유를 두는 것이 좋습니다.

 

3. 끝까지 스크롤 내렸을 때 alert 박스가 나오도록 코드 짜기

var 스크롤끝도달 = true;
  $('.lorem').on('scroll', function () {
    var 스크롤양 = document.querySelector('.lorem').scrollTop;
    var 실제높이 = document.querySelector('.lorem').scrollHeight;
    var 보이는높이 = document.querySelector('.lorem').clientHeight;
    if (스크롤양 + 보이는높이 >= 실제높이 - 10 && 스크롤끝도달) {
      스크롤끝도달 = false;
      alert('끝까지내렸습니다.');
    }
  });

if 문을 사용해서 스크롤 끝까지 내렸을 때의 높이 + 보이는 높이가 실제 높이 이상일 때 alert 박스가 나오도록 코드를 짰습니다. (10px 정도의 여유를 줬습니다.)

그리고 스크롤 이벤트가 발생할 때마다 alert 박스가 중복해서 나오기 때문에

스크롤끝도달이라는 변수를 만들어 alert 박스가 한번만 나오도록 설정하였습니다.