【CSS】スクロール領域を作り、中のスクロールバーを非表示にする

スクロール領域とはこのようなコンテンツです。

 

 

横スクロールできるパンくずやサイドバー、プライバシーポリシーなどで使われるアレです。

今回は、このスクロール領域内の「スクロールバー」を非表示にする方法を紹介します。

 

縦スクロール、横スクロールの両方のパターンのサンプルコードを用意しています。
（原理は縦横同じです）

サンプルコード

縦スクロール

HTML

<div class="wrap-vertical">
	<div class="wrap-vertical__inner">
		<p>親譲りの無鉄砲で<br>小供の時から損ばかりしている。<br>小学校に居る時分学校の<br>二階から飛び降りて<br>一週間ほど腰を抜かした事がある。<br>なぜそんな無闇をしたと<br>聞く人があるかも知れぬ。<br>別段深い理由でもない。<br>新築の二階から<br>首を出していたら、<br>同級生の一人が冗談に、<br>いくら威張っても、</p>
	</div>
</div>

 

CSS

.wrap-vertical{
	overflow: hidden;
	width: 200px;
	height: 100px;
	border: solid 1px #ddd;
}
.wrap-vertical__inner{
	overflow-y: scroll;
	width: calc(200px + 17px);
	height: 100%;
	padding: 1em;
	padding-right: calc(1em + 17px);
}

横スクロール

HTML

<div class="wrap-side">
	<div class="wrap-side__inner">
		<p>親譲りの無鉄砲で小供の時から損ばかりしている。<br>小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。<br>なぜそんな無闇をしたと聞く人があるかも知れぬ。<br>別段深い理由でもない。<br>新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、</p>
	</div>
</div>

 

CSS

.wrap-side{
	overflow: hidden;
	width: 200px;
	height: 150px;
	border: solid 1px #ddd;
}
.wrap-side__inner{
	white-space: nowrap;
	overflow-x: scroll;
	width: 100%;
	height: calc(150px + 17px);
	padding: 1em;
}

解説の要約

親要素にoverflow: hiddenを指定。

子要素にoverflow: scrollを指定してスクロールさせる。
（必要に応じてoverflow-xもしくはoverflow-yにする）
（widthやheightも必要に応じて指定する）

さらに、子要素のwidthを100%より大きくして、スクロールバーを親要素からはみ出させる。

はみ出た箇所はoverflow: hiddenにより非表示になる。

これでスクロールバーが非表示になります。

解説（丁寧にします）

「縦スクロール」をベースに解説をしていきますが、「横スクロール」も基本的な点は同じです。

 

HTMLは以下のように、3階層になっています。

 

<div class="wrap-vertical">
    <div class="wrap-vertical__inner">
        ここにコンテンツなどを配置する
    </div>
</div>

一番上の階層である.wrap-verticalにはoverflow: hiddenとwidthとheightを設定します。

こうすることで、親要素からはみ出た部分が非表示になります。

 

次の階層の.wrap-vertical__innerには、overflow-y: scrollとwidth: calc(先程のwidthの値 + 17px)、height: 100%を設定します。

overflow-y: scrollを指定することで、コンテンツ内でスクロールできるようになります。

 

また、width: calc(先程のwidthの値 + 17px)が今回のポイントです。

「先程のwidthの値」とは.wrap-verticalに指定したwidthの値です。

 

.wrap-vertical__innerを親要素より17px大きくすると、親要素からその分はみ出します。
しかし、親要素にはoverflow: hiddenを設定しているので、はみ出した箇所は非表示になります。

そして、17px分、はみ出した箇所が「スクロールバー」になります。

 

こうすることで、スクロールバーを非表示にすることができます。

まとめ

CSSプロパティのoverflowを上手に利用することでスクロールバーをある程度自由にカスタマイズできます。

スクロールバーをカスタマイズする際の注意点としては、スクロールバーをカスタマイズする方法の解説記事で、擬似クラス系の::-webkit-scrollbarなどを利用する方法が紹介されていることがありますが、この方法だとブラウザによっては反映されない場合があります。

スクロールバーを非表示にする場合は今回の記事を参考にして頂ければ大丈夫ですが、スクロールバーの見た目などを変える際は気をつけてください。