【CSS Modules】scroll-behaviorプロパティの使い方

scroll-behaviorプロパティは、スクロールコンテナのスクロール動作の挙動を制御するプロパティです。このプロパティは、Webページ内の特定の要素やウィンドウ全体に対して、プログラムによるスクロール（例えばJavaScriptのwindow.scrollTo()メソッドやElement.scrollIntoView()メソッドなど）や、HTMLのアンカーリンク（<a>タグのhref="#id"形式）によるページ内移動が発生した際の挙動を定義します。

具体的には、通常瞬時に行われるスクロール移動を、アニメーションを伴って滑らかに移動するように変更する機能を提供します。指定できる値は主に二つです。autoはデフォルトの挙動で、スクロールが瞬時に行われることを示します。これにより、対象のコンテンツへはジャンプするように移動します。一方、smoothを指定すると、スクロールはアニメーションを伴って滑らかに実行されます。この設定により、ユーザーはスクロールの途中の動きを視覚的に追うことができ、より自然で快適な操作感を得られます。

このプロパティは、overflowプロパティによってスクロール可能になったコンテナ要素、またはドキュメント全体のスクロールを制御するためにhtml要素やbody要素に適用することが可能です。ただし、ユーザーがマウスホイールやキーボード操作によって手動で行うスクロールには影響しません。また、アニメーションによるスクロールは、動きに敏感なユーザーにとって不快に感じられる場合があるため、アクセシビリティの観点から、prefers-reduced-motionメディアクエリと組み合わせて使用することを検討することが推奨されます。

Copy
1html {
2  scroll-behavior: smooth;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません