[CSS]スクロールバーが2本出てしまう時

最終更新日:2022.03.14 [月] 公開日:2022.02.14 [月] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

とってもアナログなアイキャッチですみません・・・。

タイトルの通りなのですが、なぜかスクロールバーが2本出てきて、スクロールが少しもたつくような時ありませんか?私はあります。



ある部分だけスクロールバーが2本出現する

これブラウザによって違うかもしれません。私はMacのchromeとかFirefoxを使うことが多いのですが、
あるコンテンツの時だけスクロールバーが何故か2本出てくる。
多分そのコンテンツの中でスクロールバーが出ていて、動きもちょっと、もたつくんです。

ブラウザの中のまた別のコンテンツにもスクロールバーが出るのですから、そりゃもたつくって話なのですが。

原因はoverflow-x:hidden;

どうしてもコンテンツ枠がはみ出る時に、横スクロールを出したくないがために設定するoverflox-x:hidden;。

私はこれをbody直下の大枠のdivとかに設定してました。
これがいけないみたいです。

これを外すと、2本スクロールバーは出なくなるので解決します。

でもどっちもどうしても使いたい時ありますよね・・・これはどうしたら良いのか、今まだ試行錯誤中です。

現状としては次の方法で対処しています。

①まずはみ出させない。

基本どうしてもはみ出るようなデザインの場合は背景にしたり、とにかくコンテンツとして大幅にはみ出させないようにします。その上ではみ出るところも含めてのmin-width設定してます(これは理由は後述します)。

②横スクロールしても、コンテンツが消えないようmin-width設定する。

これちょっとわかりにくいかもしれないのですが・・・

幅1200pxくらいのコンテンツのサイトを、ブラウザ幅を600pxくらいで見たとします。

すると当然横スクロールバーが出ます。隠れてる右の600pxを見ようとスクロールすると・・・真っ白!!

って現象があります。あれがちょっと嫌だなあと思って、overflow-x:hdden;。

でもこれmin-width:1200px;ってしておいたら、ちゃんと表示されるのです。

デザインによって難しい部分もあるかもしれませんが・・・これである程度は回避できる気がします。

どうして横スクロールの設定なのに縦スクロールが2重になるのか謎!!

これが意味がわからなすぎて、かなり苦戦しました・・・
理屈はわかりません。。すみません・・・


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA