スクロールがひっかかる？反発して動かない、ページが読めない場合に対応したこと

2022-09-29

スクロールできない！

スマホでスクロールしようとして気が付きました。（PCでは分かりづらかった）
スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。
リロードしてなぜかよくなることもあれば、何度か上下にスワイプするとうまくスクロールできるようになったり…。

その解決方法を備忘録として残しました！

結論から言うと、スクロールがひっかかったように進まないのはoverflowの設定でサイト全体にスクロールバーを作っている状態だったからでした。自分の場合はhtmlにoverflowをvisibleに指定したら直りました！

overflow: visible;

はじめは、ヘッダーを固定して自動でヘッダーの高さを計算するJavaScriptがうまく動いていないから？　と思っていろいろ調べてたのですが、ブラウザの開発者ツールでコンソールをチェックしてた時に、なぜかスクロールバーが二つある…と気が付きました。

自分ではスタイルを追加していなくても、テーマ等にもともと設定されているどこかのcssにoverflow-x:hidden;が入っていることもあるみたいです。そんな時はoverflow-x:hidden;を削除するとスクロールバーが一つ消えて元に戻ります。