javascript scrollIntoView를 부드럽게 만드는 방법

javascript scrollIntoView를 부드럽게 만드는 방법

리액트 앱에서는 다음과 같이 특정 노드를 표시하기 위해 호출되는 메서드가 있습니다.

scrollToQuestionNode(id) {
        const element = document.getElementById(id);
        element.scrollIntoView(false);
}

스크롤은 정상적으로 실행되지만 스크롤 동작은 약간 흔들립니다.어떻게 하면 부드럽게 할 수 있을까요?ScrollIntoView에 동일한 옵션을 제공할 수 없습니다.

이게 도움이 될 거야

scrollIntoView의 MDN 문서에서 부울 대신 옵션을 전달할 수 있습니다.

scrollIntoViewOptions Optional
A Boolean or an object with the following options:
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "center" | "end" | "nearest",
  inline:    "start" | "center" | "end" | "nearest",
}

이렇게 간단히 매개 변수를 전달할 수 있습니다.

scrollToQuestionNode(id) {
  const element = document.getElementById(id);
  element.scrollIntoView({ block: 'end',  behavior: 'smooth' });
}

참고 자료: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

멀티브로를 지원하려면 여기서부터의 smooth-scroll-polyfill을 사용합니다.

구현이 용이하도록wrapper에 대해 이렇게polyfill그래서 그.js polyfill로드 후 메서드가 초기화됩니다.

https://codepen.io/diyifang/embed/MmQyoQ?height=265&theme-id=0&default-tab=js,result&embed-version=2

이것으로 브라우저 간에 동작합니다.

document.querySelector('.foo').scrollIntoView({
  behavior: 'smooth'
});

스크롤바가 있는 div에서 다음 CSS를 사용합니다.

.element-with-the-scrollbar {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

이렇게 하면 다음 작업을 수행해도 부드럽게 스크롤할 수 있습니다.

elementWithTheScrollbar.scrollTop = 0;

언급URL : https://stackoverflow.com/questions/42503599/how-to-make-javascript-scrollintoview-smooth