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

背景

CSS のscroll-behavior: smoothを使用するだけで簡易的なスムーズスクロールをJavaScriptを利用せずに実現できる。しかし、このscroll-behaviorを利用したスムーズスクロールが有効にならないケースがあった。

scroll-behavior: smoothとは

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

body {
  scroll-behavior: smooth;
}

以下のようにアンカーリンクを使うだけで、スムーズなスクロールが実現できる。

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

---

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

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

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

CSS を確認する

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

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