[CSS] scroll-behavior: smooth; 有効ならない対処

1 min read

背景

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;

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連