HTML / CSS
 | 

【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にする)
widthheightも必要に応じて指定する)

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

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

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

解説(丁寧にします)

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

 

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

 

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

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

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

 

次の階層の.wrap-vertical__innerには、overflow-y: scrollwidth: 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などを利用する方法が紹介されていることがありますが、この方法だとブラウザによっては反映されない場合があります。

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