画面内の一部の要素だけスクロールにする方法をご紹介します。

まずはデモページを参照してみてください◎

デモページ

各コードは以下の通りです。こちらのコードをコピペするだけで実装できます。任意で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.

おまけ

たまにダミーテキストとして　□　が使われることがあるのですが、上記でご紹介したスクロールを実装しようとしたときに中身がこの”□”だとうまくいかないという不具合が起こったことがありました。うまくいかないな、というときは要素の中身も注意してみてください。

教科書では教えてくれないHTML&CSS

posted with ヨメレバ

狩野祐東 技術評論社 2021年07月17日頃

楽天ブックス

楽天kobo

Amazon

Kindle

honto

紀伊國屋書店