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

css

2022-09-29

スクロールできない!

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

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

スクロールができないのは二重のスクロールバー、overflowの設定のせいだった!

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

overflow: visible;

 

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

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

-css

関連記事

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利! href属性、class属性、target属性、alt属性、src属性、type属性…これら …

CSSで上下センター揃え

上下センター揃え フレックスボックス 「display: flex」を使います。 親{display: flex; justify-content: center; align-items: cent …