[WEB] 윈도우 스크롤링

📄 Window.scroll()

window.scroll() 함수는 윈도우의 원하는 위치로 스크롤하게 해주는 API입니다.

<button onclick="scroll(0,100);">button</button>

창 상단에 수직 100번째 픽셀을 배치한다.

OPTION들

window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});

• top: Y축을 따라 픽셀 수를 지정
• left: X축을 따라 픽셀 수를 지정
• behavior: smooth를 지정하면 스크롤이 부드럽게 애니메이션 된다.

📄 Window.scrollBy()

주어진 값만큼 윈도우에서 스크롤링하는 함수입니다.

사용방법은 window.scrollBy()와 크게 다르지 않습니다.

window.scrollBy(0, 100); // 페이지 아래로 스크롤 할때
window.scrollBy(0, -100); // 페이비 위로 스크롤 할때

OPTION들

window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});

• top: Y축을 따라 픽셀 수를 지정
• left: X축을 따라 픽셀 수를 지정
• behavior: smooth를 지정하면 스크롤이 부드럽게 애니메이션 되고, instant를 지정하면 즉시 해당 위치로 점프하게 됩니다.

출처

• 드림코딩