[javascript] scroll 이벤트/scrollHeight/scrollTop/clientHeight

window.addEventListener('scroll',function(){
//스크롤 할 때마다 이벤트 실행


	console.log(window.scrollY);
    //유저가 스크롤 바를 얼마나 내렸는지 표시
    // console.log(window.pageYOffset);(호환성 보완)
    
    console.log(window.scrollX); //가로스크롤 표시
    
    window.scrollTo(0,100);
    //강제스크롤(window.scrollTo(x,y)) 해당 위치로
    
    window.scrollBy(0,100);
    //현재 위치에서 y축으로 100px 스크롤 하기.(현위치 기준 이동)
    
  });

jquery

$(window).on('scroll',function(){
	$(window).scrollTop();
    //현재 스크롤 바 위치 출력 및 이동 
    });


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

scrollY & scrollTop

- scrollY: 현재 페이지를 얼마나 스크롤 했는지 알고 싶을 때 사용

- scrollTop:일반 div 를 얼마나 스크롤 했는지 알고 싶을 때 사용

- scrollHeight: 일반 div의 실제 높이

- clientHeight: 눈에 보이는 div의 높이

 

div class='box'의 스크롤 바 내린 양(overflow-y:scroll)

document.querySelector('.box').addEventListener('scroll',function(){
      console.log(document.querySelector('.box').scrollTop);
      console.log(document.querySelector('.box').scrollHeight);
      console.log(document.querySelector('.box').clientHeight);
	  console.log(window.scrollY);

});

 

참고

 

https://blogpack.tistory.com/706

scrollHeight, clientHeight, offsetHeight 의 차이

https://devbirdfeet.tistory.com/228

JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값)