web-dev-qa-db-ja.com

javascript scrollIntoViewをスムーズにする方法は？

反応アプリでは、次のように特定のノードを表示するために呼び出されるメソッドがあります。

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

スクロールは正常に行われますが、スクロールアクションは少しぎくしゃくしています。どうすればスムーズにできますか？同じためにscrollIntoViewに指定できるオプションはありません。

javascriptcssreactjsscroll
27
Sahil Sharma

これが役立つかもしれません。

ScrollIntoViewのMDNドキュメントから、ブール値の代わりにオプションを渡すことができます。

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

60
lavish

マルチブラウザをサポートするには、ここからスムーススクロールポリフィルを使用します。

https://github.com/iamdustan/smoothscroll

簡単に実装するには、ポリフィルの周りに次のようなラッパーを使用して、ロード後に.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'
});
0
metamagikum