CSS overflow scroll で スクロールバーを非表示にする

CSS でスクロールできる領域は overflow（ overflow-x  / overflow-y ）プロパティに scroll や auto を指定しますが、この方法ではブラウザによりスクロールバーが表示されます。

overflow プロパティに hidden を指定してしまうと、スクロールバーは非表示になりますが、スクロールできない領域となってしまいます。

今回 CSS で実現したいことは、スクロールできる状態でスクロールバーが非表示であること。

そこで利用するのが scrollbar-width プロパティ です。

scrollbar-width プロパティは overflow: scroll と組み合わせて利用することで、スクロールできる状態でありながらスクロールバーを非表示にすることができます。

.scrollbar_hidden {
	scrollbar-width: none;
}

scrollbar-width のブラウザーの互換性を確認すると主要なブラウザには対応しているように見えますが、古いブラウザは対応していない場合があります。

その場合は、ベンダープレフィックス -ms-overflow-style や擬似要素 ::-webkit-scrollbar を組み合わせて使うとよいかと思います。

.scrollbar_hidden {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.scrollbar_hidden::-webkit-scrollbar {
	 display: none;
}

以上の CSS を適用して動作を確認してみます。

scrollbar-width, -ms-overflow-style, ::-webkit-scrollbar を組み合わせると、スクロール可能な状態でありながら、スクロールバーを非表示にすることができました。

本記事に記載の内容は、Chrome 121.0.6167.184 (PC) / 121.0.6167.178 (mobile)、Firefox 122.0.1、Safari 15.0、Microsoft Edge 121.0.2277.128 で確認しましたが、その他のブラウザによっては正常に動作しない場合もあります。

参考情報
scrollbar-width – CSS: カスケーディングスタイルシート | MDN
overflow – CSS: カスケーディングスタイルシート | MDN