CSSでスクロールバーを表示・非表示にする方法

CSSでスクロールバーを表示したり非表示にしたりするには、oveflowプロパティを使います。

oveflowプロパティは、ボックスに収まらずにはみ出た内容の表示方法を指定するプロパティで、次の値を指定することができます。

overflowプロパティの値一覧

auto…ブラウザの設定に依存
visible…ボックスからはみ出ている要素を表示する（初期値）
hidden…ボックスからはみ出ている要素は表示させない
scroll…ボックスに収まらない内容はスクロール表示

スクロールバーを表示する方法

CSSでスクロールバーを表示するには、「oveflow: scroll;」を指定します。

ボックスに収まらない内容は横スクロールや縦スクロールで確認でき、スクロールバーが表示されます。

また、X軸方向（横）のスクロールバーを表示したい場合は「oveflow: hidden;」と「oveflow-x: scroll;」、Y軸方向（縦）のスクロールバーだけを表示する場合は「oveflow: hidden;」と「oveflow-y: scroll;」を指定します。

See the Pen
css-scroll-bar by KUBO (@KUBOGEN)
on CodePen.

HTML
<h2>「oveflow: scroll;」を指定</h2>
<div class=”overflow-box overflow-scroll”>
　<p>スクロールバーを表示。スクロールバーを表示。</p>
　<p>スクロールバーを表示。スクロールバーを表示。</p>
　<p>スクロールバーを表示。スクロールバーを表示。</p>
　<p>スクロールバーを表示。スクロールバーを表示。</p>
　<p>スクロールバーを表示。スクロールバーを表示。</p>
</div>

<h2>「oveflow-x: scroll;」を指定</h2>
<div class=”overflow-box overflow-x”>
<p>X軸方向のスクロールバーを表示。X軸方向のスクロールバーを表示。</p>
<p>X軸方向のスクロールバーを表示。X軸方向のスクロールバーを表示。</p>
<p>X軸方向のスクロールバーを表示。X軸方向のスクロールバーを表示。</p>
<p>X軸方向のスクロールバーを表示。X軸方向のスクロールバーを表示。</p>
<p>X軸方向のスクロールバーを表示。X軸方向のスクロールバーを表示。</p>
</div>

<h2>「oveflow-y: scroll;」を指定</h2>
<div class=”overflow-box overflow-y”>
<p>Y軸方向のスクロールバーを表示。Y軸方向のスクロールバーを表示。</p>
<p>Y軸方向のスクロールバーを表示。Y軸方向のスクロールバーを表示。</p>
<p>Y軸方向のスクロールバーを表示。Y軸方向のスクロールバーを表示。</p>
<p>Y軸方向のスクロールバーを表示。Y軸方向のスクロールバーを表示。</p>
<p>Y軸方向のスクロールバーを表示。Y軸方向のスクロールバーを表示。</p>
</div>

CSS
.overflow-box {
　width: 200px;
　height: 200px;
　background: #f5f5f;
　border: 1px solid #000;
}
.overflow-scroll {
　overflow: scroll;
}
.overflow-x {
　overflow: hidden;
　overflow-x: scroll;
}
.overflow-y {
　overflow: hidden;
　overflow-y: scroll;
}
p {
　white-space:nowrap;
}

スクロールバーを非表示にする方法

ボックスに収まらない要素を非表示にするには「oveflow: hidden;」を指定すればOKですが、スクロールはできる状態にしながら、スクロールバーは非表示にしたい時は次のように指定します。

少しブラウザによって指定方法が異なるので注意してください。

See the Pen
css-scrollbar-hidden by KUBO (@KUBOGEN)
on CodePen.

HTML
<h2>スクロールバーを非表示にする</h2>
<div class=”scrollbar-hidden”>
　<p>スクロールバーを非表示。スクロールバーを非表示。</p>
　<p>スクロールバーを非表示。スクロールバーを非表示。</p>
　<p>スクロールバーを非表示。スクロールバーを非表示。</p>
　<p>スクロールバーを非表示。スクロールバーを非表示。</p>
　<p>スクロールバーを非表示。スクロールバーを非表示。</p>
</div>

CSS
.scrollbar-hidden {
　width: 200px;
　height: 200px;
　background: #f5f5f;
　border: 1px solid #000;
　overflow: scroll;
　-ms-overflow-style: none; /* IE, Edge 対応 */
　scrollbar-width: none; /* Firefox 対応 */
}
/* Chrome, Safari 対応 */
.scrollbar-hidden::-webkit-scrollbar {
　display: none;
}
p {
　white-space: nowrap;
}

スクロールバーを表示する方法

スクロールバーを非表示にする方法

Leave a Comment X