как сделать javascript scrollIntoView гладким?

В реагирующем приложении у меня есть метод, вызываемый для отображения определенного узла следующим образом.

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

Прокрутка происходит нормально, но действие прокрутки немного вяло. Как я могу сделать его гладким? Я не вижу никаких параметров, которые я могу дать scrollIntoView для этого.

Ответ 1

Это может помочь.

Из документации MDN scrollIntoView Вы можете передать опцию вместо boolean.

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

Поэтому вы можете просто передать такой параметр.

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

Ссылка: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

Ответ 2

Для поддержки нескольких браузеров используйте полифилл прокрутки smoots отсюда:

https://github.com/iamdustan/smoothscroll

Для простоты реализации используйте такую обертку вокруг polyfill, чтобы метод polyfill.js после загрузки был инициализирован:

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

Теперь это должно работать в разных браузерах:

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