cssで要素を部分的にスクロールさせる
画面内の一部の要素だけスクロールにする方法をご紹介します。
まずはデモページを参照してみてください◎
各コードは以下の通りです。こちらのコードをコピペするだけで実装できます。任意でwidthやheightを指定してください◎
横スクロールの場合
HTML
<div class="scroll01">
<p>スクロールしたい要素</p>
</div>
CSS
.scroll01 {
width: 300px;
height: 60px;
white-space: nowrap;
overflow-x: scroll;
}
縦スクロールの場合
HTML
<div class="scroll02">
<p>スクロールしたい要素</p>
</div>
CSS
.scroll02 {
margin: 50px 0;
overflow-y: scroll;
height: 100px;
width: 300px;
}
表部分だけスクロールしたい場合
HTML
<section class="list">
<div class="list_item">
<p>year</p>
<p>month</p>
<p>day</p>
</div>
<div class="list_scroll">
<table>
<tbody>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
</tr>
</tbody>
</table>
</div>
</section>
CSS
.list {
display: flex;
justify-content: space-between;
max-width: 300px;
}
.list_item{
margin-top: 30px;
width: 60px;
}
.list_item p,.list_scroll table th,.list_scroll table td{
line-height: 30px;
height: 30px;
}
.list_scroll {
display: flex;
overflow-x: scroll;
width: calc(100% - 70px);
}
.list_scroll table{
border-collapse:collapse;
min-width: 450px;
width: 100%;
}
.list_scroll table th,.list_scroll table td{
border: solid 1px #ccc;
width: 70px;
}
.list_scroll table th{
background: #f3f3f3;
}
.list_scroll table td{
padding: 0 10px;
}
スマホのときだけ要素の中身をスクロールにしたい場合は、メディアクエリで指定すればOKですね。
@media screen and (min-width:768px)
.scroll01 {
width: 300px;
height: 60px;
white-space: nowrap;
overflow-x: scroll;
}
}
この時、デバイスによってはスクロールバーが表示されないこともありますので｢scroll｣のテキストを入れておくといいかもしれません。
See the Pen
yLabwWM by nanami (@nanami_po)
on CodePen.
おまけ
たまにダミーテキストとして □ が使われることがあるのですが、上記でご紹介したスクロールを実装しようとしたときに中身がこの”□”だとうまくいかないという不具合が起こったことがありました。うまくいかないな、というときは要素の中身も注意してみてください。
関連記事
