CSSスクロール動作プロパティ
例
ドキュメントにスムーズなスクロール効果を追加します。
html {
scroll-behavior: smooth;
}
定義と使用法
このscroll-behavior
プロパティは、ユーザーがスクロール可能なボックス内のリンクをクリックしたときに、まっすぐジャンプするのではなく、スクロール位置をスムーズにアニメーション化するかどうかを指定します。
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSSOMビューモジュール(作業ドラフト) |
JavaScript構文: | object .style.scrollBehavior = "smooth" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
scroll-behavior | 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
CSS構文
scroll-behavior: auto|smooth|initial|inherit;
プロパティ値
Value | Description |
---|---|
auto | Allows a straight jump "scroll effect" between elements within the scrolling box. This is default |
smooth | Allows a smooth animated "scroll effect" between elements within the scrolling box. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |