scroll

스크롤 이벤트를 통해, 페이지나 엘리먼트의 스크롤에 반응할 수 있습니다.

scroll 이벤트로 스크롤에 반응합니다.

window.addEventListener('scroll', ()=> {
  showScroll.innerText = `${window.pageYoffset}px`;
})

scroll value

window.pageYoffset으로 문서가 수직 단위로 얼마나 스크롤 되었는지 알 수 있습니다.

window.scrollY와 같으나 호환성을 위해 남아있음

x값도 pageXoffset과 scrollX가 있습니다.

Element.clientHeight는 엘리먼트의 내부 높이를 픽셀로 반환합니다.

window.innerHeight는 윈도우 뷰포트 내부 높이를 픽셀로 반환합니다.

scroll move

window.scrollTo(x,y) 메서드나,
window.scrollBy(x,y) 메서드를 통해 스크롤을 이동시킬 수 있습니다.

scrollTo는 절대 위치를 기준으로 x,y 값으로 이동합니다.
scrollBy는 현재 위치를 기준으로 x,y 값만큼 이동합니다.

css의 scroll-behavior 프로퍼티를 통해 스크롤 스타일을 정할 수 있습니다.
smooth로 설정하면, 부드럽게 스크롤됩니다.

또한, scrollTo나 scrollBy는 인자로 options 객체도 받는데,
behavior을 설정할 수 있습니다.

window.scrollTo({
  x : 100,
  y : 100,
  behavior : 'smooth',
})

Prevent scroll

onscroll 리스너에서 evnet.preventDefault()로는 스크롤을 막을 수 없습니다.
스크롤이 이미 발생한 후에, 트리거 되기 때문입니다.

pageUp이나 pageDown을 처럼
스크롤을 발생시키는 원인에 대해서는 event.preventDefault()로 막을 수 있습니다.

스크롤을 발생시키는 방법이 매우 많기 때문에, CSS의 overflow를 사용하는 것이 안정적입니다.

Scroll UseCase

Endless Page

특정 이상 스크롤 되면 요소가 추가됩니다.

 function appendTime() {
   const timeShow = document.createElement('div');
   timeShow.innerText = new Date();

   document.body.append(timeShow);
 }

 window.addEventListener('scroll',()=> {
   if(window.innerHeight + window.scrollY > document.body.clientHeight) {
     appendTime();
   }
 })

Up Button

<button id='arrowTop'>up<button>

 window.addEventListener('scroll',()=>{
   arrowTop.hidden = window.scrollY < document.documentElement.clientHeight;
 })

arrowTop.addEventListener('click', ()=>{
  window.scrollTo(0,0);
})

use case 더 추가하기