“scroll-behavior”プロパティ:スムーズスクロール

概要

“scroll-behavior”プロパティはナビゲーションによるスクロールが発生した時の挙動を指定するプロパティです。

リンクのクリックによるページ内での移動やCSSOM View ModuleのAPI、スクロールスナップなどによるスクロールが発生したときのスクロールの挙動を指定できます。

“scroll-behavior”プロパティはルート要素(HTMLでは“html”要素)に適用された場合にビューポートに適用されます。

“scroll-behavior”プロパティはユーザーがスクロールバーを操作したり、マウスのホイールを回したりなどした場合のスクロールには影響しません。

ブラウザはこのプロパティを無視することができます。

サンプルコード

html { scroll-behavior: smooth;}


値

仕様書

定義されている仕様書

scroll-behavior

auto
smooth

なめらかにスクロールする

html { scroll-behavior: smooth;}


表示サンプルはリンク先を参照

瞬時にスクロールする

html { scroll-behavior: auto;}


表示サンプルはリンク先を参照