[23] Element.scroll 메서드

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

Element: scrollLeft property - Web APIs | MDN

 

Element.scroll() 메서드

Element.scroll() 메서드는 HTML 요소(Element)의 스크롤 위치를 수평(x축)과 수직(y축) 방향으로 이동시키는 메서드입니다.

 

기본 문법

element.scroll(x, y);

 

옵션을 사용하는 문법 (ScrollOptions)

element.scroll({
  top: y,       // 수직 스크롤 위치
  left: x,      // 수평 스크롤 위치
  behavior: 'smooth' // 스크롤 애니메이션 ('auto' 또는 'smooth')
});

 

매개변수

1. x:
   • 스크롤할 수평 위치(픽셀 단위).
   • 기본값: 0.
2. y:
   • 스크롤할 수직 위치(픽셀 단위).
   • 기본값: 0.
3. ScrollOptions 객체 (선택사항):
   • top: 수직 스크롤 위치.
   • left: 수평 스크롤 위치.
   • behavior: 스크롤 애니메이션 동작 (기본값은 auto).
     
     

---

사용 예제

1. 수직/수평 위치로 이동

const div = document.getElementById('scrollableDiv');
div.scroll(100, 200); // x: 100px, y: 200px 위치로 이동

 

2. 부드러운 스크롤

const div = document.getElementById('scrollableDiv');
div.scroll({
  top: 300,          // y축 위치
  left: 100,         // x축 위치
  behavior: 'smooth' // 부드러운 스크롤
});

 

---

ScrollOptions 속성

속성	설명	값
top	수직 스크롤 위치	숫자 (픽셀)
left	수평 스크롤 위치	숫자 (픽셀)
behavior	스크롤 애니메이션 동작	'auto', 'smooth'

 

---

부드러운 스크롤과 브라우저 지원

1. CSS와의 조합

HTML 문서의 기본 스크롤 동작을 부드럽게 하고 싶다면 CSS 속성 scroll-behavior를 사용할 수도 있습니다:

html {
  scroll-behavior: smooth;
}

 

2. 브라우저 지원

• 대부분의 최신 브라우저는 scroll() 메서드와 behavior: 'smooth' 옵션을 지원합니다.
• 호환성 참고:
  • behavior: 'smooth'는 Internet Explorer에서 지원되지 않음.
  • 대안: JavaScript로 애니메이션을 구현하거나 scrollBy() 메서드를 사용.

 

---

scroll() vs 다른 스크롤 메서드

메서드	설명
element.scroll()	특정 위치로 스크롤. 부드러운 스크롤 지원.
element.scrollTo()	scroll()과 동일. 주로 사용자의 직관적 이해를 위해 사용.
element.scrollBy()	현재 스크롤 위치를 기준으로 상대적인 이동.
element.scrollIntoView()	특정 요소가 뷰포트에 보이도록 스크롤.

 

---

요약

• Element.scroll()은 특정 요소의 스크롤을 제어하는 강력한 메서드입니다.
• top, left, behavior 옵션을 사용해 다양한 스크롤 동작을 설정할 수 있습니다.
• 주로 부드러운 스크롤이나 특정 위치로의 이동에 사용됩니다.
• CSS의 scroll-behavior와 결합하여 사용자 경험을 개선할 수 있습니다.