このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

scroll-behavior”プロパティ:スムーズスクロールCSS3で追加

記事Sep. 27th,2020
Dec.26th, 2021
ナビゲーションによるスクロールが発生した時の挙動を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 scroll-behavior: auto;
適用対象 スクロール可能なボックス
継承 No
パーセント値 パーセント値は指定できません
計算値 指定した値
アニメーション 不可

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

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

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

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

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

サンプルコード

html { scroll-behavior: smooth;}

説明
auto スクロールを瞬時に行う
smooth スクロールはユーザー・エージェント既定の速度でなめらかに行う
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
scroll-behavior
定義なし

定義なし

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
auto
定義なし

定義なし

定義あり

定義あり
smooth
定義なし

定義なし

定義あり

定義あり

使用例

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

html { scroll-behavior: smooth;}
表示サンプルはリンク先を参照新しいウィンドウで表示します

瞬時にスクロールする

html { scroll-behavior: auto;}
表示サンプルはリンク先を参照新しいウィンドウで表示します
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク