[CSS] scroll-behavior: smooth; が有効にならない時の対処法

背景

Chrome 61、Firefox 36 以降で、CSS のscroll-behavior: smoothというプロパティを使用するだけで、スムーズスクロールが実現できるようになった。JavaScript を使わずにスムーズなスクロールを実現できる。しかし、スムーズスクロールが効かない場合があった。

scroll-behavior: smoothとは

CSS でスムーズスクロールを有効化するために、scroll-behaviorプロパティを使用する。以下のように指定できる。

body {
  scroll-behavior: smooth;
}

上記のプロパティを指定した場合、JavaScript を使用せずにアンカーリンクを使うだけで、スムーズなスクロールが実現できる。

<a href="#scroll-position">scroll-position</a>

<h2 id="scroll-position">scroll-position</h2>

スムーズスクロールが動作しない場合

スムーズスクロールが動作しない場合、以下のような理由が考えられる。

CSS を確認する

bodyに以下のような指定のいずれかがされている場合、スムーズスクロールが動作しない。

overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;