スムーズスクロール

昨年、建物を建設中FilePond product page 私はscrollintoview APIにつまずいた.ビューポートに要素をスクロールするには、ブラウザに指示する便利な方法です.

This article was originally published on my personal blog

The scrollIntoView APIを追加することによってスクロール部分をアニメーション化するように指示することができますbehavior プロパティscrollIntoViewOption オブジェクト.

element.scrollIntoView({ behavior: 'smooth' });

私はすぐに私のJavaScript馬に飛び乗って、ブラウザがアンカーのクリックを自動的に検出するために小さなスクリプトを書きました.このジャンプは実際にdisorientingすることができますので、このプロセスをアニメーション化することはユーザの経験をかなり改善するでしょう.
scrollIntoViewOption currently only works on Firefox and Chrome .

私はそれを一日と呼びました.
では何だ!
Aがあるとわかる scroll-behavior 設定できるCSSプロパティsmooth , 文字通りそのリテラルです.ほぼ似ているawesome: yes-please . 私たちはscroll-behavior プロパティをコンテナーに表示します.
私の創造a new demo using only CSS .

我々がナッツに行って、これを我々のすべてのサイトに適用する前に、我々が心に留めておく必要がある2、3のものがあります.

スクロール距離問題
移動する距離がたくさんある場合は、Firefoxは、スクロールの時間を制限するためにコンテンツをスキップしますが、Chromeは最大速度を持っているだけで、ターゲットに到達するのに時間がかかるでしょう.

私たちは長いページを検出し、条件付けで滑らかなスクロールスタイルを適用するために使用することができます.

アクセシビリティ
動画を見ていると人々は酔いを受けるかもしれない.これを回避するには、CSSプロパティを prefers-reduced-motion メディアクエリ.残念ながらChromeはこれをサポートしていません.Safariはそれをサポートしますが、Safariはスムーズなスクロールをサポートしていません.

.my-smooth-container {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .my-smooth-container {
    scroll-behavior: auto;
  }
}

結論
ときにすぐにJavaScriptに到達する必要はありません新しい機能を決定する.私たちは、それがCSSでも行うことができるかどうかを見つけるために最初に迅速な検索を行う必要があります.The scroll-behavior プロパティは素晴らしいUXの改善、非常に長いページでそれを無効にし、あなたのページをアクセスできるように無効にするオプションを提供してください.