【CSS】スタイルシートを使ってブラウザのスクロールバーを消す方法。

CSSを使ってスクロールバーを非表示にする方法を紹介します。

通常、width や height で指定されたコンテンツが表示域よりも大きくなった場合に、自動でブラウザの横や下部にスクロールバーが表示されるわけですが、CSSを使って簡単に、これを非表示にできます。

.content {
	-ms-overflow-style:none; /* IE、Edge 対応 */
	scrollbar-width:none; /* Firefox 対応 */
}
.content::-webkit-scrollbar {
	display:none; /* chrome、Safari対応 */
}

Chrome、Safari、Firefox、IE、Edgeで、それぞれ非表示にする方法が異なってきます。
それぞれの詳しい説明は次のとおり。

IE・Edgeでスクロールバーを非表示にする

.content {
	-ms-overflow-style:none;
}

IEとEdgeでは-ms-overflow-style:none;を指定することでスクロールバーを非表示にできます。

Firefoxでスクロールバーを非表示にする

.content {
	scrollbar-width:none;
}

Firefoxでは scrollbar-width:none;を指定することでスクロールバーを非表示にできます。

Chrome、Safariでスクロールバーを非表示にする

.content::-webkit-scrollbar {
	display:none;
}

ChromeとSafariの場合は少し特殊で、::-webkit-scrollbarを付与した要素にdisplay:none;を指定します。
これでスクロールバーが非表示になります。

ウェブサイトのデザインによっては、都合上どうしてもスクロールバーを表示させたくない場合がありますからね。
簡単なので覚えておいて損はないはずです。