HTML スクロールバーのあれこれ


スクロールバーの表示、非表示の設定

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、iphoneでスクロールバーの表示、非表示

スマホ用の設定です。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は対応していません。


TOPページへ戻る