scrollIntoViewとスムーズスクロール

リンク(内チェーン)をクリックして現在のページの真ん中にジャンプする必要があることがよくあります.このようなニーズに対しては,アンカーポイントを用いて実現することが容易に考えられる.しかし、一つ問題があります.一歩転がって、硬すぎます.
私はやはり滑らかに転がるのが好きです.HTML 5にはCSS属性scroll-behaviorが設けられており、一連のスクロール関数の許容パラメータを修正してスムーズスクロール特性をサポートしている.

scroll-behavior

このCSSプロパティは、autoとsmoothの2つのカスタム値のみを受け入れます.デフォルト値はautoで、すぐに最後までスクロールすることを示します.smoothはスムーズスクロールを表します.この属性は、スクロール関数scrollTo、scrollIntoView等のデフォルトのスクロール挙動に影響し、scrollTop、scrollLeft等のDOM属性変更時のスクロール挙動にも影響する.scroll-behaviorがルート要素()に設定されている場合は、ビューポート(viewport)に適用されます.この場合、アンカーポイント、インナーチェーンがトリガするビューポートのスクロールにも有効です.
だからhtml要素にスタイルscroll-behavior: smoothを設定するだけで内鎖をクリックするとページのスムーズなスクロールがトリガーされ、簡単でしょう.

scrollIntoView

scroll-behaviorは、スクロール関数を指定するデフォルトの動作であり、scrollIntoViewを含む.名前の通り:この関数は、ある要素をウィンドウの表示領域にスクロールします.
ブール値またはオブジェクトの2つの形式の値を受け入れます.ブール値を受け入れるのは、スムーズスクロール(旧版)がサポートされていないブラウザと互換性があるためです.ここでは対象値だけを話します.

{
  behavior: "auto" | "instant" | "smooth", //    auto
  block: "start" | "center" | "end" | "nearest", //    center
  inline: "start" | "center" | "end" | "nearest", //    nearest
}

オブジェクトには3つのパラメータがあります.

behaviorはスクロール方式を表す.autoは、現在の要素を使用するscroll-behaviorスタイルを表します.instantおよびsmoothは、 および を表す.

blockは、ブロックレベル要素の配列方向がスクロールされる位置を示す.デフォルトのwriting-mode: horizontal-tbでは、垂直方向です.startは、ビューポートの上部と要素の上部を位置合わせすることを示します.centerは、ビューポートの中央と要素の中央を位置合わせすることを示す.endは、ビューポートの下部と要素の下部を位置合わせすることを示します.nearestは、近接位置合わせを示します.

inlineは、行内の要素の配列方向がスクロールされる位置を示す.デフォルトのwriting-mode: horizontal-tbでは、水平方向です.その値はblockと類似している.

例

https://codepen.io/CarterLi/p...
残念なことに、現在はブラウザのサポートが不十分です.一方、scroll-behaviorはCSS属性としてpolyfillにはならない.scrollIntoViewはJavaScript関数としてpolyfillに友好的です.現在の状況では、scrollIntoViewにpolyfillを加える方式が推奨されている

完了