[JS] 특정 위치로 스크롤 (scrollTo / scrollIntoView)

ScrollTo

: 입력된 좌표까지 스크롤

window.scrollTo(x_좌표, y_좌표);

element.scrollTo(0, 1000);
element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});

// 예시) 입력한 id의 최하단으로 스크롤
const element = document.getElementById(id);
    element.scrollTo({
        top: element.scrollHeight,
        behavior: "smooth",
    });

 

Parameters

- top : y축

- left : x축

- behavior (Optional)

   - smooth : 부드럽게 움직이는 스크롤

   - instant : 단번에 움직이는 스크롤

   - auto : 계산된 scroll-behavior에 값에 의해 스크롤

 

 

---

ScrollInToView

: 해당 요소가 보이도 스크롤

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);  // alignToTop
element.scrollIntoView({ block: "end" });  // scrollIntoViewOptions
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

 

Parameters

: Parameter로는 alignToTop 또는 scrollIntoViewOptions를 사용

 

- alignToTop (Optional)

  - true : 요소의 top을 보여준다. scrollIntoViewOptions: {block: "start", inline: "nearest"}와 같음

  - false : 요소의 bottom을 보여준다. scrollIntoViewOptions: {block: "end", inline: "nearest"}와 같음

 

- scrollIntoViewOptions (Optional)

   - behavior

      - smooth : 부드럽게 움직이는 스크롤

      - instant : 단번에 움직이는 스크롤

      - auto : 계산된 scroll-behavior에 값에 의해 스크롤

   - block : 수직 스크롤

      - start (default), center, end, nearest

   - inline : 수평 스크롤

      - start, center, end, nearest (default)

 

참고)

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

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