[JS] Scrolling

Yuno·2021년 7월 25일
0

모던JS

목록 보기
16/16
post-thumbnail

scroll

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

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

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

scroll value

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

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

x값도 pageXoffsetscrollX가 있습니다.

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

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

scroll move

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

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

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

또한, scrollToscrollBy는 인자로 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 더 추가하기

profile
web frontend developer

0개의 댓글