Chrome系だけスムーズスクロールが効かない現象を解決

Webサイトを構築していて、ページ内リンクをクリックした際にパッと場所が変わるのではなく、ぎゅーんとスクロールしながら移動させたいのにできない!というヘルプ依頼が来ました。

サイト側でそういう指定をしていないんじゃないの?と聞いたところ、ちゃんと解説サイトを参考にして設定してある、という。そして、スマホならスクロールしながら移動してくれると。

さらに、FirefoxならPCでもスクロールしながら移動してくれて。ChromeとEdgeはダメなんです、という。

そんなことある?

…と疑問に思いつつ、自分のPCで確認してみたところ、いやいや、ChromeでもEdgeでもスクロールしながら移動できています。

しかし、ヘルプ依頼主のPCで確認すると、確かにChromeとEdgeだけ、ページ内リンクをクリックしてもスクロールせずにパッと切り替わる。もうひとつ付け足すと、マウスのコロコロでスクロールすると動きがカクカク…つまりスムーズスクロールしていない。

なんだ、だったら話が早いじゃん!と軽い気持ちで対応しようとしたところ、意外な落とし穴があったのでした。

備忘録としてメモメモ。

Chromeでスムーズスクロール設定

特定のブラウザだけスムーズスクロールしないのであれば、ほとんどの場合で、ブラウザの設定の問題。そう思い込んで設定に取り掛かりました。

Chromeでスムーズスクロールの設定を行うためには、通常の設定画面からではなく、flagsという設定画面(試験段階の機能の設定画面)から設定します。

Chromeのアドレスバーに「chrome://flags」と入力し、Enterキーを押します。

試験段階の機能の設定画面

「Experiments」という見出しのついた設定ページが開きます。上部にある「Search flags」に「smooth」と入力します。

Smooth Scrolling項目を検索

「Smooth Scrolling」という項目が表示されるので、設定を確認してみます。

ヘルプ依頼者のPCでは「Default」になっているのですが…このデフォルトというのは有効?無効?どっちなんだろう。この状態だと良く分からないので、とりあえず有効(Enabled)にしてみましょう。

有効・無効の選択

設定を変更した場合、Chromeの再起動が必要になりますので、右下の「Relaunch」をクリックしてChromeを再起動します。

ブラウザの再起動

これで解決できたでしょう!

…と思ってページ内リンクをクリックしたところ、スクロールして移動しないどころか、マウスのコロコロでスムーズスクロールすらしていない。どうやらChrome側で設定を有効にしてもダメなようです。

試しにEdgeの方も確認してみましょう。

Edgeにもflagsという設定画面があり、「chrome://flags」もしくは「edge://flags」で入れます。こちらでもSmooth ScrollingをEnabledに設定してみましたが、ダメでした。

ChromeペースのVivaldiでも症状は一緒。どうやらChrome系がダメっぽいですね。

問題はWindowsの設定にあった

スムーズスクロールというのは、言ってみればWindows画面上のアニメーションの一種。ということで、次にWindowsの設定でアニメーションをしないように設定しているのでは?と疑ってみました。

Windowsの設定を開いて「システム」を開き、

Windowsの「設定」

「詳細情報」の中の「システムの詳細設定」をクリックします。

システムの詳細設定を開く

システムのプロパティウィンドウが開くので、パフォーマンスの中の「設定」をクリックします。

Windowsのパフォーマンスの設定

「視覚効果」タブにあるリストの一番上「Windows内のアニメーション コントロールと要素」のチェック状態を確認すると…チェックが外れていました。

アニメーションコントロールの有効・無効設定

結論から言うと、これがスムーズスクロールしない原因でした。

ヘルプ依頼主になぜチェックを外したのか確認したところ、少しでもWindowsの動作を軽くするために無効化していたとのこと。

ChromeやEdgeの設定で「Default」という選択肢があるのは、もしかしたらWindowsの設定に準ずる、ということなのかもしれません。なので、Windows側でアニメーションコントロールを無効化していたので、スムーズスクロールも無効化されていた、と。

でも待てよ。

じゃあ、Windows側でアニメーションコントロールを無効化していたとして、なぜ、Chrome側でEnabledに設定しても有効にならないのか。Enabledに設定してもWindowsの設定に引っ張られるなら、「Enabled」という選択肢は不要ですよね。

試しに、Windows側でアニメーションコントロールを有効化してから、Chromeで動作確認したところ、きちんとスムーズスクロールされるようになりました。Chrome側の設定が「Default」でも「Enabled」でも動作は一緒でした。

これは、Windowsの設定の方が優位ということ(つまり仕様)なのか、それともChrome側の不具合なのか。

ブラウザによって動きが違う

まとめてみると、Chrome系(Chrome、Edge、Vivaldi等)は、いくらブラウザ側でスムーズスクロールを有効にしても、Windows側で「Windows内のアニメーション コントロールと要素」のチェックを外していれば、Windows側の設定が優先される。

Firefoxでは、ブラウザ側でスムーズスクロールを有効にしていれば、Windows側でどんな設定にしていようと、スムーズスクロールが有効になる。つまり、Firefox側の設定が優先される。

OperaもFirefoxと同様、ブラウザ側の設定が優先されるようです。

他のブラウザについては未検証ですが、今のChrome系のシェアが圧倒的なことを考えると、とりあえずサイト制作をする環境では、Windows側の「Windows内のアニメーション コントロールと要素」のチェックは外さない方が良さそうですね。

さいごに

ということで、ページ内リンクがスクロールしてくれない、という場合は、まずサイト側でアニメーション効果が有効になっているか確認。次にWindows側の設定で「Windows内のアニメーション コントロールと要素」が無効化されていないか確認すると良さそうです。

ブラウザの設定は、特に変更したことがなければ基本的に「Default」になっているはずですので、確認のための優先度は低いです。

Webサイトを制作していて、まさかWindows側の設定のせいで動きに影響してくる、なんてことがあるとは。初めて遭遇した問題だったので、驚きと言うか、意外でした。

改めて考えてみれば、「そりゃそうだよなぁ」とも思えますけどね。

ちなみに、今回使用したブラウザは以下の通りです。

Chrome 102.0.5005.63
Microsoft Edge 101.0.1210.53
Vivaldi 5.2.2623.48
Firefox 100.0.2
Opera 86.0.4363.59

とりあえず問題が解決できました。お疲れ様でした!

初稿:2022年5月26日