스크롤(scroll) 이벤트 사용법

스크롤 이벤트리스너

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

 

스크롤바를 조작하면 scroll 이벤트가 발생한다.
그래서 scroll 이벤트리스너를 전체 페이지에 달면

전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다.
코드를 실행하고 스크롤을 조작하면 할때마다 123이 콘솔에 출력된다.

 

 

 

window 범위

 
참고로 window는 그냥 전체 페이지를 의미한다.

document도 전체 페이지인데 window가 약간 더 큰 개념이고

scroll 이벤트리스너는 관습적으로 window에 붙인다.

 

 

스크롤 관련 유용한 기능들

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을 설치했을 경우 이상하게 천천히 이동된다.

이 것을 원치 않는다면 css파일 맨 위에 :root { scroll-behavior : auto }를 추가한다.

 

 

 

제이쿼리(jQuery) 스크롤

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

제이쿼리는 더 짧다.

$(window).scrollTop()를 사용하면 위와 같이 현재 페이지 스크롤 양을 알려주고,

더 간편한 건

$(window).scrollTop(100) 를 쓰면 페이지 강제이동도 해준다.

 

 

박스 끝까지 스크롤시 알림띄우기

이용약관을 다 읽으면 알림창 등을 띄우게 하고 싶다.
다 읽은 것을 확인하기 위해서는 스크롤을 다 내렸는지 확인해야한다.

1. div 스크롤바 내린 양 == div 실제높이일 경우
2. 알림창(alert)을 띄운다.

div 스크롤바 내린 양 구하는법

박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려줍니다.
해당 박스의 셀렉터 뒤에 .scrollTop을 쓰면 위에서부터 얼마나 내렸는지 알려준다.

 

 

JS

const lorem = document.querySelector(".lorem");

lorem.addEventListener('scroll', function(){
    console.log( lorem.scrollTop);
});

 

jQuery

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

 

 

 

div 박스 높이 구하는 법

스크롤바가 생긴 박스의 경우 스크롤가능한 실제높이가 궁금한 경우
셀렉터로 찾아서 .scrollHeight 붙이면 나온다.

 

JS

lorem.addEventListener('scroll', function(){
    console.log( lorem.scrollTop);
    console.log( lorem.scrollHeight);
});

 

jQuery

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

 

 

 

박스가 화면에 보이는 부분 높이는 .clientHeight 하면 나옵니다.

이 것은 일반 css로 설정한 height값 즉, 화면에 그대로 보이는 세로 값이 나옵니다.

 

 

 

이제 위와 같이 div 스크롤바 내린 양 == div 실제높이를 하려고 하는데

확인해보니 스크롤바를 끝까지 내려도 260이 나오고
div 실제 높이는 360이 나온다.

같다고 비교하면 조건성립이 불가능하다.


이렇게 서로 값이 맞지 않는 이유는

스크롤바 내린 양은 진짜 스크롤바만 내린 양 뿐이고,
박스가 보이는 높이는 포함하지 않아서 그렇다.

 

 

따라서 

div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우

( lorem.scrollTop + lorem.clientHeight == lorem.scrollHeight )
를 조건으로 하면 성립된다.


여기서 주의할 것은

스크롤 내린 양은 정수단위로 나오지 않고
OS 마다 부정확해서 여유를 두고 비교해야한다. 

그래서 끝까지 스크롤 한 값이 아닌 오차범위를 생각해서

끝에서 10px정도를 남기고 기준으로 잡는게 좋다.

 

 

10px정도 남긴 기준

 

JS

lorem.addEventListener('scroll', function(){
    if(lorem.scrollTop + lorem.clientHeight >= lorem.scrollHeight-10){
        alert("통과");
    }
});

 

jQuery

lorem.on("scroll", function(){
    if(lorem.scrollTop() + lorem.innerHeight() >= lorem.prop('scrollHeight')-10){
        alert("통과");
    }
})

 

 

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