WWW Watch

Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート

現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior: smooth; が実験的ながらサポートされました。CSS のみでスムーズスクロールを実現することができます。

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior プロパティ、およびその値、smooth が実験的ながらサポートされました。

現状では、デフォルトで無効になっているため、about:config から layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-enabledtrue にしないと有効にはなりませんが、有効にした上で body 要素などに scroll-behavior: smooth; を指定する事で、ページ内リンクの移動時など、ページのスクロールが瞬時にではなく、スムーズスクロールで動作するようになります。

Firefox Nightly (36.0a1)

about:config から scroll-behavior プロパティを有効に

about:config を開いて、検索フォームに layout.css.scroll-behavior と入力すると、layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-enabled が表示されると思います。

about:config から layout.css.scroll-behavior で検索して設定を表示します

表示されたら、それぞれの値を true に変更します。これで scroll-behavior プロパティが有効になりました。

layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-enabled を true に設定します

scroll-behavior プロパティの指定

実際の scroll-behavior プロパティの指定は下記のような感じです。

body {
  scroll-behavior: smooth;
}

scroll-behavior プロパティの仕様は下記にあります。

指定できる値は、auto、および smoothauto が初期値ですが、この場合はスクロールは瞬時に行われます。

下記にデモページを用意しましたので、上記の設定が完了した Firefox Nightly でアクセスして試してみてください。ページ内リンクをクリックすると、通常は瞬時に移動しますが、ページがスムーズスクロールして該当セクションへ移動するはずです。

ページ内のスムーズスクロールは、現状では JavaScript を用いて実装するのが一般的ですが、scroll-behavior: smooth; がサポートされると、スムーズスクロールは CSS に任せる事ができますので、無駄なスクリプトを読み込まなくて済みますね。

ちなみに、scroll-behavior プロパティは Chrome でも実装されていますが、こちらも現時点ではデフォルトで無効になっています (というか、現時点ではサポートするプラットフォームが Linux のみになっているので Windows などでは有効にできません。)。

Chrome の設定画面で 「滑らかなスクロール」 の項目を表示した例

参考

関連エントリー

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー