先日、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ファイルをクリックするまでなかなか気が付きませんでした。
