bodyタグにscroll="no"の属性をつけるとスクロールバーが非表示になります。
標準ではscroll="yes"になっています。この場合は<body>だけで特に記述する必要はありません。
| <body scroll="yes"> | スクロールバー表示。scroll属性をつけない場合もこれ |
| <body scroll="no"> | スクロールバー非表示になります。 |
| <body scroll="auto"> | 表示、非表示が自動で判断されます。 |
スタイルシートの場合はoverflowを指定する事でスクロールバーを表示したり非表示にしたりできます。
外部CSSやCSSを別記述する場合のサンプルコード
.scroll {
width: 200px;
height: 200px;
overflow:scroll; ←200pxを超える場合にスクロールバーが表示されます。
}
| overflow:visible; | 領域をはみ出して表示。指定しない場合はこれになります。 |
| overflow:hidden; | はみ出した部分が表示されなくなります。 |
| overflow:scroll; | スクロールバーが出ます。 |
| overflow:auto; | 自動でスクロールバーが必要な場合は表示されます。 |
直接bodyやdivに指定する場合のサンプルコード
<body style="overflow: scroll;">
<div style="overflow: scroll;">
overflowの部分をoverflow-xにすると横スクロールoverflow-yで縦スクロールの指定ができます。例えばoverflow-x:hidden;で横スクロールだけ非表示にするなどもできます。
ちなみにAndroid2.Xでは対応していません。overflow:scrollやoverflow:auto;で指定してもoverflow:hiddenの扱いになってしまいます。4.0以降は対応しています。
スマホ用の設定です。androidやiosでは-webkit-overflow-scrolling: touchとCSSに記述すれば大丈夫です。
サンプルコード
.scroll {
width: 200px;
height: 200px;
-webkit-overflow-scrolling: touch; ←200pxを超える場合にスクロールバーが表示されます。
}
| -webkit-overflow-scrolling: touch; | スクロールバー表示になります。Androidの場合はtouchが効きません。autoと同じ扱いになります。 |
| -webkit-overflow-scrolling: auto; | スクロールバーを表示するか自動で決まります。 |
androidは4.0.4、4.1,4.3で確認済みです。ただし、heightを指定しないとスクロールバーが表示されません。また、android2.Xは対応していません。