スムーススクロールが有効にならずにハマった話と解決策

2025年5月23日
未分類

Web制作やフロントエンド開発をしていると、「アンカーリンクをクリックしたときに、ページ内をなめらかにスクロールさせたい」という要望はよくあります。最近ではCSSの scroll-behavior: smooth; を使えば、たった1行で実現できるため、私も当たり前のように導入していました。

しかし、ある日「なぜか自分のWindows環境だけ、どのブラウザでもスムーススクロールが効かない」という現象に直面。iPhoneやMacでは問題なく動作するのに、WindowsのChrome・Edge・Firefoxでは、アンカーリンクをクリックすると一瞬でジャンプしてしまい、まったくスムースになりません。

1. コードもCSSも間違っていないのに…

まず疑ったのは自分の実装ミス。

  • CSSの html, body { scroll-behavior: smooth; } は正しく書いてある
  • 余計なJavaScriptでスクロールを上書きしていない
  • アンカーリンクやIDの指定も正しい
  • ブラウザのバージョンも十分新しい（Chrome 61以上、Edge 79以上、Firefox 36以上）

念のため、bodyやsectionなどに overflow: hidden; がかかっていないかも確認。
一時的にJSで強制的に scrollIntoView({behavior: 'smooth'}) を書いてみても、やはり一瞬でジャンプするだけ。

「なぜだ……？」

2. ブラウザの設定や拡張機能を疑う

次に疑ったのはブラウザの設定や拡張機能。

  • 拡張機能をすべて無効化
  • シークレットウィンドウで検証
  • ChromeのflagsやEdgeの実験的機能もリセット

それでも変化なし。
「もしかしてWindowsのOS自体の設定が関係しているのでは？」と、ふと頭をよぎりました。

3. まさかの設定

調べてみると、Windows 10/11 には「設定 → 簡単操作 → ディスプレイ → Windowsでアニメーションを表示する」という項目があり、これをオフにしていると、

  • CSSの scroll-behavior: smooth;
  • JavaScriptの scrollIntoView({behavior: 'smooth'})
  • そのほか多くのアニメーション

が一切効かなくなる、という仕様だったのです。

実際にこの設定をオンに戻してみたところ、今まで何をやっても効かなかったスムーススクロールが、どのブラウザでも一発で有効になりました。

4. なぜこの仕様なのか

これは「ユーザーが視覚的な動きを減らしたい（＝酔いやすい、集中しづらい等）」というアクセシビリティ配慮のため、
OS側の「アニメーションを減らす」設定（prefers-reduced-motion: reduce）が有効だと、
ブラウザも自動的にアニメーションを抑制する、という流れです。

つまり、ユーザーの意図を尊重しているという点では正しい挙動なのですが、
開発者視点では「なぜ自分の環境だけ動かないのか？」とハマりやすい落とし穴でもあります。

5. 解決策と今後の注意点

  • Windowsでスムーススクロールが効かない場合は、まず「アニメーションを表示する」設定を確認
  • サイトのユーザーにも「OSの設定によってはアニメーションが無効化される」ことを想定しておく
  • どうしても全員にアニメーションを強制したい場合は、JSのポリフィル（smoothscroll-polyfill等）を使う手もあるが、アクセシビリティの観点からは推奨されない

まとめ

「コードもCSSも合っているのに、なぜか自分のWindowsだけスムーススクロールが効かない」
そんなときは、OSのアクセシビリティ設定を疑ってみてください。
自分の環境だけで再現しないバグは、意外とこうした“外部要因”が原因のことも多いです。

同じようにハマった方の参考になれば幸いです！

LinkedInPinterestTumblr