【CSS】overflow: scrollでスクロールバーを消す方法

CSSのoverflow:scrollで表示されちゃうスクロールバーを消す方法のご紹介です。
overflow:scrollを指定するとスクロールバーが必ず表示されてしまいます。
デザイン上必要であれば全然いいんだけど、デザインにはスクロールバーの高さを考えてない場合もある。
またスクロールバーの高さやデザインもブラウザによって様々で、悩ましいところ。

そんな厄介なスクロールバーをCSSだけで消す処理を書いていきます。
まずはサンプルから。

サンプルテキスト

春の訪れとともに、街は色とりどりの花々で彩られます。
桜の花が満開になると、多くの人々が公園に集まり、花見を楽しむ光景が広がります。
友人や家族と共に、青空の下でお弁当を食べたり、笑い声を交わしたりする時間は、心を豊かにしてくれます。
また、春は新しい始まりの季節でもあります。
学校や職場で新しい出会いがあり、希望に満ちた気持ちでいっぱいになります。
自然の美しさと人々の温かさが融合するこの季節は、私たちにとって特別な意味を持っています。
春の風を感じながら、未来への期待を胸に抱いて歩んでいきたいと思います。

次は、これを実装するCSSを。

.conttain {
  wifth: 100%;
  height: 200px;
  padding: 35px 39px;
  border: 1px solid #000;
  // ここからスクロールの指定
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.conttain::-webkit-scrollbar {
  display:none;
}

CSSの説明。

◼︎ overflow-y: scroll
縦方向のオーバーフローが発生した場合、スクロールバーを表示します。

◼︎ overflow-x: hidden
横方向のオーバーフローが発生した場合、スクロールバーを表示せず、はみ出した部分を隠します。

◼︎ scroll-behavior: smooth
overflowしたコンテンツをスムーズスクロールする指定。

◼︎ -ms-overflow-style: none
Internet ExplorerおよびEdgeブラウザにおいて、スクロールバーを非表示にするためのプロパティです。

◼︎ scrollbar-width: none
Firefoxブラウザにおいて、スクロールバーの幅を0に設定し、スクロールバーを非表示にします。

◼︎ :-webkit-scrollbar{ display:none; }
WebKitベースのブラウザ（ChromeやSafariなど）用のカスタムスタイルを定義して、スクロールバーを非表示にします。