overflow-*** は、overflow の縦と横を個別に指定するプロパティです。
（*** の部分には、x または y が入ります）
overflow-x … 横方向の指定
overflow-y … 縦方向の指定
このプロパティの値に hidden を指定すると、領域をはみ出した内容は表示されなくなり、スクロールバーも出なくなります。
body要素にこのスタイルを設定すると、ブラウザの縦と横のスクロールバーを個別に消すことができます。
body {
overflow-x: hidden;
overflow-y: hidden;
}
| overflow-x | hidden … （横方向にはみ出した部分を表示しない・横方向のスクロールバーを消す） |
|---|---|
| overflow-y | hidden … （縦方向にはみ出した部分を表示しない・縦方向のスクロールバーを消す） |
上記以外の値については、ボックスカテゴリーの「縦横のスクロールを個別に指定する」をご覧ください。
■使用するセレクタについて
表示モードが「互換モード」の場合はbody要素に指定しますが、「標準モード」の場合はhtml要素に指定します。
ブラウザの表示サイズは、ユーザーの環境により異なります。領域内に収まっているはずの内容も、見る人によってははみ出してしまっている可能性があります。領域に余程の余裕がない限りは、スクロールバーは消さない方がいいでしょう。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
body {
overflow-y: hidden;
}
-->
</style>
</head>
<body>
・
・
・
</body>
</html>
▼これをブラウザで見ると次のように表示されます
