WebDesigner's Memorandumウェブデザイナーの備忘録

CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ

CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ

ページ内リンクをクリックしたときに、ページがキレイにスクロールしながら移動するいわゆる「スムーススクロール(スムーズスクロールと言う人もいますが、英語だとSmooth Scrollなので、この記事ではスムーススクロールに統一します)」。

ひと昔前だとjQueryを活用したり、window.scrollを使ったりが必要でしたが、CSSでも実現ができます。

scroll-behavior

scroll-behavior: smooth;を指定してあげると、ページ内リンクをクリックしたときにスムーススクロールになります。
1行追加するだけなので非常にラクですね。

html {
  scroll-behavior: smooth;
}

実際のサンプルは下記になります。

See the Pen scroll-behavior: smooth; by Masakazu Saito (@31mskz10) on CodePen.

ちゃんとページ内リンクをクリックするとスムーススクロールになっています。
JavaScriptは一切使用していないのが分かると思います。

対応ブラウザ

いままで何行もJavaScriptを書く必要があったのを考えると、1行で実装が済んでしまうscroll-behaviorは非常に便利なのですが、対応ブラウザがまだ微妙です。

Data on support for the css-scroll-behavior feature across the major browsers from caniuse.com

IE11は切ってしまってもいい気がしますが、Safariに対応していません。

その他の問題

1行でスムーススクロールの設定ができてしまうので、細かい調整ができないのは問題でもあります。

  • ページ上部に固定ヘッダーなどがあって、遷移先の数ピクセル上までスクロールなどの細かい調整ができない
  • 全てのページ内リンクがスムーススクロールになってしまう
  • アニメーションスピードの設定はできない

細かく設定したい場合は、いままで通りJavaScriptを使う必要がありそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね