「スクロールバーが邪魔して、コンテンツが見づらい」
Webサイトの使いやすさを向上するのが、スクロールバー本来の役割です。
しかしレイアウト崩れやコンテンツが見づらくなるケースもあり、非表示にしたい場合があるでしょう。
スクロールバーの非表示はブラウザ毎に異なり、3つの方法を使用する必要があります。
この記事では、スクロールバーを非表示にする方法ブラウザ別に3つ解説しています。
特にMicrosoft edgeでスクロールバーを非表示については、直近で実装方法が変更されているので注意が必要です。
- スクロールバーを非表示にする方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSでスクロールバーを非表示にする方法
まずはスクロールバーを非表示にする方法を紹介します。
.container {
scrollbar-width: none; /*Firefox対応のスクロールバー非表示コード*/
-ms-overflow-style: none;/*Internet Explore対応のスクロールバー非表示コード*/
}
.container::-webkit-scrollbar {
display: none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/
}上記のように、ブラウザごとにスクロールバーを非表示にする方法は異なります。
【注意】スクロールバーを非表示する際には、クロスブラウザ対応が必要
どのブラウザから閲覧してもスクロールバーを非表示にするため、3つのコードを書く必要があるのです。
このようにどのブラウザでWebサイトを表示しても同じく表示するようにコーディングすることを、クロスブラウザ対応と呼びます。
スクロールバーをブラウザ別に非表示にする方法を解説
スクロールバーを非表示にする方法について、ブラウザ別に詳しく解説していきます。
まずはoverflow: scroll;を指定したcontainerを用意します。
この場合containerからはみ出したテキストは、スクロール領域に隠れます。
<div class="container">
<p>1:スクロールバーを非表示にするのはかんたん</p>
<p>2:クロスブラウザ対応が必要です</p>
<p>3:どのブラウザからみても同じく見えるか確認してください</p>
<p>4:スクロールバーを非表示にするのはかんたん</p>
<p>5:クロスブラウザ対応が必要です</p>
<p>6:どのブラウザからみても同じく見えるか確認してください</p>
</div> .container {
width: 300px;
height: 150px;
border: 1px solid black;
white-space: nowrap;/*テキストの改行を防ぐコード*/
overflow: scroll; /*親要素から子要素がはみ出した場合、スクロール領域にして隠す指定*/
}
全てのブラウザでテキストのはみ出しがスクロール領域に隠れ、スクロールバーが表示されました。
次にスクロールバーを非表示にする方法を、ブラウザごとに解説します。
1.Firefoxのスクロールバーを非表示する方法
Firefoxでスクロールバーを非表示にする場合は、scrollbar-widthプロパティを使用します。
.container {
scrollbar-width: none;
}scrollbar-widthプロパティは見慣れないと感じるかもしれません。
Firefoxのスクロールバーの幅を調整するプロパティです。
scrollbar-widthの値をnoneに指定すると、Firefoxのスクロールバーを非表示にできます。
2.Chrome・Safari・Microsoft Edgeのスクロールバーを非表示にする方法
Chrome・Safari・Microsoft Edgeは、同じ方法でスクロールバーを非表示にすることが可能です。
overflow: scroll;を指定している要素に、擬似要素::-webkit-scrollbarを記述します。
続けて擬似要素::-webkit-scrollbarに対しては、display:none;を値を指定します。
.container::-webkit-scrollbar {
display: none;
}
主要な4つのブラウザで、いずれもスクロールバーを非表示にできました。
ここで注意点が2つあります。
【注意】Microsoft Edgeは直近でスクロールバーの非表示方法が変更になったMicrosoft Edgeは以前-ms-overflow-style: none;というコードで、スクロールバーの非表示を指定できました。
しかし現行のMicrosoft Edgeでは、-ms-overflow-style: none;は対応していないため注意です。
【注意】::-webkit-scrollbar は将来的に使えなくなる可能性がある擬似要素::-webkit-scrollbarは現在のところ複数のブラウザに対応しています。
しかし擬似要素::-webkit-scrollbarを用いる方法は、MDN Web docsでは非標準とされています。
つまり将来的には使えなくなる可能性が高いということです。
以下、MDN Web docsにおける擬似要素::-webkit-scrollbarについての記述です。
非標準：この機能は非標準であり、標準の軌道に乗っていません。Webに面している実稼働サイトでは使用しないでください。すべてのユーザーに対して機能するとは限りません。また、実装間に大きな非互換性があり、動作が将来変更される可能性があります。
引用：MDN Web docs「::-webkit-スクロールバー」
3.Internet Exploreのスクロールバーを非表示にする方法
Internet Exploreでスクロールバーを非常時にする際には、-ms-overflow-style: none;を指定します。
.container {
-ms-overflow-style: none;
}
Internet Exploreは2022年6月15日で完全に終了するブラウザです。
それまでの期間の対応が必要な場合は、-ms-overflow-style: none;を追加で記述しましょう。
まとめ
今回の記事では、CSSでスクロールバーを非表示にする方法をブラウザ別に解説しました。
スクロールバーには、ユーザビリティを向上する働きがあります。
しかしスタイル崩れやコンテンツが見にくくなるなど、問題を生む可能性があるのです。
状況に応じて、スクロールバーの非表示を検討するのがおすすめといえます。
ここでスクロールバーを非表示にする方法を、ブラウザ別に再度確認してみましょう。
| ブラウザ | スクロールバーを非表示にする方法 |
| Firefox | 任意の要素にscrollbar-width: none;を指定する |
| Chrome・Safari・Microsoft Edge | 擬似要素::-webkit-scrollbarにdisplay: none;を指定する |
| Internet Explore | 任意の要素に -ms-overflow-style: none;を指定する |
またスクロールバーを非表示にする際の注意点は、以下の3点が存在します。
- クロスブラウザ対応が必須となる
-ms-overflow-style: none;では、Microsoft Edgeのスクロールバーを非表示にできなくなった（擬似要素::-webkit-scrollbarにdisplay: none;を指定して非表示にする）- 擬似要素
::-webkit-scrollbarにdisplay: none;を指定する方法は、使用できなくなる可能性あり
この記事で解説した内容を参考に、スクロールバーの非表示にチャレンジしてみましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
