10秒でできる！CSSのoverflow:scroll;のスクロールバーを非表示にする方法

みなさんこんにちは！エンジニアの高澤です！

今回はCSSのoverflow:scroll;のスクロールバーを非表示にする方法について解説していきたいと思います。

今回の内容は、HTMLとCSSにてスクロールバーを実装する際に頻繁に使う内容になります。

よろしければぜひ当記事をお仕事でお役立ていただけましたら幸いです。

今回実装する内容

今回実装する内容は、以下のようにスクロール時に表示されるバーを非表示にする実装になります。

See the Pen
Untitled by 高沢翔汰 (@wllijswc-the-sans)
on CodePen.

スクロールバーはあったら便利ですが、あったらあったで場合によっては邪魔になってしまう、デザイン性を損なってしまう場合があります。

そんな時にここでの内容はお役に立てますので、差し支えなければ繰り返し当記事をご利用いただけましたら嬉しいです。

結論（以下必要な部分のコピペで解決です）

早速ですが以下のCSSコードが結論になります。

以下のCSSコードの「.element」のセレクタは仮になります。この「.element」セレクタは「overflow-x: scroll;」などのスクロールさせるためのCSSが適用された対象のセレクタとして想定しております。

この解説コードの「.element」セレクタはご自身の対象のセレクタとして置き換えていただき、中のプロパティと値のコードをご自身の「.element」セレクタと同様のポジションのセレクタにコピー＆ペーストしてください。

ChromeとSaferiの対応も重要ですので、「::-webkit-scrollbar」の記述も忘れないようにしてください。

.element {
    overflow-x: scroll;
    ...（略）...

    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.element::-webkit-scrollbar {
    display: none;
}

これでスクロールバーは非表示になったかと思います。

次からは、ここでよくわからなかった、うまくできなかったという方向けに実際にご自身で手で動かしていただきつつ理解を深めるための解説をさせていただいております。

よろしければ、よくわからなかったという方は読み進めてみてください。

実装する方法

それでは実装する方法について解説していきたいと思います。

とりあえずスクロールバーを非表示にするということを再現するためにサンプルを実装していきたいと思います。

HTMLを記述する

以下のHTMLコードを任意の場所にコピー＆ペーストしてください。

<div class="element">
 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>

CSSを記述する

次に以下のCSSコードをCSSファイル等にコピー＆ペーストしてください。

.element {
    width: 300px;
    height: 200px;
    background: #eee;
    overflow-x: scroll;
    white-space: nowrap;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.element::-webkit-scrollbar {
    display: none;
}

ペーストして保存が完了したら、以下のようにスクロールバーが非表示になった状態で横スクロールの動きが実装できたかと思います。

See the Pen
Untitled by 高沢翔汰 (@wllijswc-the-sans)
on CodePen.

これで実装は完了です。お疲れ様でした！

実際のお仕事の際に当記事をご利用いただく時は掲載したCSSコードのみをお使いいただく形になるかと思います。

念の為、改めて以下に必要な部分のみのCSSコードを掲載させていただきます。

.element {
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.element::-webkit-scrollbar {
    display: none;
}

上記をそのままコピーしてうまいことお役立ていただければと思います。

実装のメリット

CSSのoverflow: scroll;でスクロールバーを非表示にすることにはいくつかのメリットがあります。主にユーザーエクスペリエンスやデザインの観点から、以下のような効果が得られます。

デザインの一貫性と美観

スクロールバーはデバイスやブラウザによってスタイルが異なり、時にはデザイン全体の美観を損ねることがあります。スクロールバーを非表示にすることで、デザインの一貫性を保つことができ、よりクリーンでスタイリッシュなレイアウトを維持できます。特に、モダンでミニマルなデザインを目指す場合に有効です。

限られたスペースの有効活用

スクロールバーが表示されると、表示されるコンテンツ領域が狭くなることがあります。スクロールバーを非表示にすることで、画面の幅や高さを最大限に活用し、コンテンツの表示スペースを増やすことができます。特に、モバイル端末などの小さな画面では、このメリットが大きいです。

ユーザーエクスペリエンスの向上

スクロールバーが常に表示されると、ユーザーにとって視覚的に煩わしいと感じることがあります。特に、マウスホイールやトラックパッドでのスクロールが一般的になっている現在、スクロールバーが不要な場合も多いです。スクロールバーを非表示にすることで、より直感的な操作感を提供し、余計なUI要素を排除してユーザーエクスペリエンスを向上させることができます。

カスタマイズされたスクロールの実装

スクロールバーを非表示にして、カスタマイズされたスクロール体験（例えば、JavaScriptを使ったスムーズスクロールや、カスタムUIを使ったナビゲーション）を提供することができます。デフォルトのスクロールバーのデザインや動きが制約となる場合、自分でより洗練されたスクロール体験を設計できるのもメリットです。

エレメント内スクロールのシームレスな表現

overflow: scroll;を使って要素内でスクロールさせる場合、スクロールバーが表示されるとユーザーにその存在が強調されすぎることがあります。スクロールバーを非表示にすることで、スクロール可能な領域を視覚的に主張しすぎることなく、シームレスなコンテンツ表示を実現できます。

今回の実装の注意点

スクロールバーを非表示にすることは必ずしも全てのケースで最適とは限りません。特に、スクロールバーが視覚的に存在しないと、ユーザーが「この領域がスクロール可能である」ことに気づかない場合があり、ユーザビリティに影響を与える可能性があります。そのため、スクロール可能な領域を適切に目立たせたり、視覚的なインディケータを用いることが重要です。

スクロールバーを非表示にする際には、デザインとユーザビリティのバランスを慎重に考えることが必要です。

まとめ

CSSのoverflow:scroll;のスクロールバーを非表示にする方法についての解説は以上になります。

今回の内容は、HTMLとCSSにてスクロールバーを実装する際に頻繁に使うことになるかと思いますので、よろしければぜひ当記事をお仕事でお役立ていただけましたら幸いです。