Javascript - 스크롤 위치 인식하기

scroll이 존재하는 위치의 id, 혹은 class 등을 querySelector로 가지고 온다.

 

let scrollPosition = document.querySelector("#scrollPositionId"); 

or

let scrollPosition = document.querySelector(".scrollPosition.scrollId"); //class가 여러개이면 .을 이용해 이어서 써준다.

 

가지고 온 변수를 이용해 eventListener를 등록해준다.

scrollPosition.addEventListener( "scroll", event => {

    console.log( scrollPosition.scrollTop ) //현재 스크롤의 세로 위치

    console.log( scrollPosition.scrollHeight - scrollPosition.clientHeight ) //스크롤의 최대 길이

} );

 

마우스 휠 등을 이용해 스크롤바를 내릴 때 마다 스크롤의 위치와, 스크롤의 최대길이가 출력된다.