div にスクロールバーを追加するには、指定するだけでよいoverflow属性をautoに設定します。以下の例では、div に水平スクロールバーを設定しています:
例
<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">サンプル -- 学ぶのは技術だけでなく、夢でもある!!!
サンプル -- 学ぶのは技術だけでなく、夢でもある!!!
サンプル -- 学ぶのは技術だけでなく、夢でもある!!!
サンプル -- 学ぶのは技術だけでなく、夢でもある!!!</div>
試してみる »
幅(width)と高さ(height)は、実際の必要に応じて設定できます。
上記の例は、div の内容の高さが 300px より大きい場合は垂直スクロールバーが表示され、300px 未満の場合はスクロールバーが表示されないことを示しています。幅が 70px より大きい場合は水平スクロールバーが表示され、小さい場合は表示されません。
div 内のスクロールバーを常に表示したい場合は、overflow 属性を scroll に設定できます:
overflow を scroll に設定することもできます。つまり:
例
<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">サンプル -- 学ぶのは技術だけでなく、夢でもある!!!
サンプル -- 学ぶのは技術だけでなく、夢でもある!!!
サンプル -- 学ぶのは技術だけでなく、夢でもある!!!
サンプル -- 学ぶのは技術だけでなく、夢でもある!!!</div>
試してみる »
その他の設定
水平スクロールバーのみを設定:
<div style="width:100px;overflow-x:auto"></div>
垂直スクロールバーのみを設定:
<div style="height:300px;overflow-y:auto"></div>
水平と垂直の両方を設定:
<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>
参考になる記事はこちら: