最終更新日：2022.06.16 [木]　公開日：2022.02.14 [月]　カテゴリー：html・CSS・jQuery・JS備忘

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

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

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

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

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

原因はoverflow-x:hidden;

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

私はこれをbody直下の大枠のdivとかに設定してました。
これが原因だったみたい。

これを外すと、２本スクロールバーは出なくなるので解決します。
＊でもこの設定していても出ない時は出ない・・・なぜ？

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

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

①まずはみ出させない。

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

でも最近はレスポンシブが多いのであんまりはみ出ないか。。。

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

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

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

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

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

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

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

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

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