お問い合わせはコチラから

マウスのホイールでサイトのスクロールが引っかかる時の原因

サイト運営

先日、HTMLサイトをwordpress化していた時のこと、簡単に出来上がったので最終確認していたら、不思議な現象に見舞われて、原因がわかるのにかなり苦労しました。

備忘録的に、メモを残しておきます。

発生した現象

多くの人は無意識的に、サイトを開くと、まず、マウスのホイールを回して、ページをスクロールして表示されていないページを見に行くと思います。

出来上がったサイトを確認する際に、無意識にマウスのホイールを回しました。しかし、回しても回してもいっこうにスクロールしない。かなり回すとやっとスクロールし始める、という奇妙な現象が発生しました。

最初はマウスにゴミでもついてるのかいな?と思いましたが、特定のページだけ発生する現象でした。

検索しても、全然原因らしきものに引っ掛からなくてかなり困りました。

あまりにも手掛かりが無いので、元のHTMLサイトを確認すると同じ現象が起きていて、そして異常にすぐに気が付きました。

画面左のスクロールバーが太い、というか、2本表示されている。

スクロールバーが2本出ているということは、サイトが2重構造になっていて、iframeのような感じになっていたのでしょうか、1本目のスクロールバーが完全に終わりに行くまで、2本目の本来のスクロールバーが動かないようでした。

そのため、最初にいくらホイールを回してもスクロールしない状態になっていたようです。

原因

スクロールバーが2本表示されている。 このキーワードで検索すると対策はすぐに出てきました。

原因は、htmlタグやbodyタグに、overflow-x:hiddenを指定していることでした。

html, body {
width: 100%;
overflow-x: hidden;
}

対策

そもそも、自分で指定していないので、 overflow-x:hidden をサクッと削除して、スクロールバーが一本になって、スクロールも思い通りに動くようになりました。

まとめ

HTMLサイトを見ると不自然なことにすぐに気が付きましたので、おそらく、Wordpress環境では、スクロールバーが2本出ている現象がとても確認しにくかったのだとおもいます。

今回はライブサイトのHTMLサイトがすでに無かったので、手元のhtmlファイルをクリックするまでなかなか気が付きませんでした。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
目次
タイトルとURLをコピーしました