2012年02月03日(金)

ブラウザの横スクロール&縦スクロールバーをCSSで表示させなくする方法

レイアウトやデザイン上どうしても縦横スクロールバーを表示させたくない場合などあると思いますが、スタイルシートでお手軽に実現できます。

下に書いた3つのいずれかのコードを「body」に指定します。

縦のスクロールバーを表示させない場合
overflow-y: hidden;
横のスクロールバーを表示させない場合
overflow-x: hidden;
縦にも横にも表示させない場合
overflow: hidden;

念のため書き方の例を。

外部スタイルシートを使う場合の例
body { ここに記述 }
HTMLに直接書く場合の例
<body style="ここに記述">

最近僕がこのタグを使った事例は、サイトのメニュー部分を「position:fixed;」で固定表示させ、そうでない部分は縦だけにスクロールさせて横にはスクロールさせたくなかったため「overflow-x:hidden;」で対応しました。


コメントを残す

*」は入力必須項目


  • © 2010-2018 試行錯誤 All Rights Reserved.