制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングCSS縦スクロールバーが2つ表示される

縦スクロールバーが2つ表示される

2014年03月11日CSS 
縦スクロールバーが2つ表示される記事のアイキャッチ画像

縦スクロールバーが2つ表示される現象の原因と対処法です。

まえがき

この前、仕事でサイトの修正してたら気づいたら縦スクロールバーが2本になるトンでもな現象が発生しました。

スクロールバー2本

しかも、数々の修正項目をすべて直した後の確認の段階で発見したので具体的に何が原因でそうなってしまったのかが分からず、直すのに一苦労しました。
二度と躓かないよう縦スクロールバーが2本出る原因と修正方法をエントリーします。

スクロールバーが2本出現する原因と修正

いつのまにか2本でている場合、大半はhtmlかbodyに指定している「overflow」関係のCSSが原因です。
KoToRiは当時このようにCSSを指定していました。

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

3行目の「overflow-x」の指定を削除すれば改善されました。

まとめ

原因が分かればなんてことないですね。
「overflow」関係のCSSをhtmlやbodyに指定する際は、この現象のことを頭の片隅に入れておけばいざというとき役に立つかもです。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント