パソ君
・スクロールバーを非表示にする方法は？
こんな疑問にお答えします。
デザインカンプによっては、故意に縦スクロールさせて反映する部分ありますよね。
お問合せフォームのプライバシーポリシー部分とか。
ただ時によって、スクロールは有効のままスクロールバーを非表示にしてほしいということがあります。
実はそれCSSで簡単に実装可能です。
ジト
すぐにできるよ！
ということで、この記事では「CSSでスクロールバーを非表示にする方法」について解説していきます！
この記事でわかること
CSSでスクロールバーを非表示にする方法
目次
【解決】CSSでスクロールバーを非表示にする方法【全ブラウザ】
そんなスクロールバーを非表示にしたサンプルがこちら↓
See the Pen スクロールバーを非表示にする➀ by jito-coder (@jito-coder) on CodePen.
バーはありませんが、スクロールしたらコンテンツが見える実装になっていますよね。
<div class="scrollbar">
<div class="scrollbar__box">
<p class="scrollbar__head">ここにタイトルが入ります</p>
<p class="scrollbar__detail">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="scrollbar__box">
<p class="scrollbar__head">ここにタイトルが入ります</p>
<p class="scrollbar__detail">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>.scrollbar {
height: 350px;
padding: 2em;
border: 2px solid #111;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar::-webkit-scrollbar {
display: none;
}コードの中で重要な点がこちら↓
- Edge対応用のコードを記述
- Firefox対応用のコードを記述
- ChromeとSafari対応用のコードを記述
順に解説してきます。
縦スクロールの作り方については、下記記事をどうぞ。
【解説】HTML・CSSでのプライバシーポリシー作り方【縦スクロール】 下記コードを記述することで、Edgeでスクロールバーを非表示にできます。
.scrollbar {
-ms-overflow-style: none;
}下記コードを記述することで、Firefoxでスクロールバーを非表示にできます。
.scrollbar {
scrollbar-width: none;
}下記コードを記述することで、ChromeとSafariでスクロールバーを非表示にできます。
.scrollbar::-webkit-scrollbar {
display: none;
}「::-webkit-scrollbar」疑似要素に対して、非表示指定をする感じですね。
スクロールを有効に、かつスクロールバーを非表示にする場合、下記コードを使えば全ブラウザで対応可能です。
.scrollbar {
// Edge用
-ms-overflow-style: none;
// Firefox用
scrollbar-width: none;
}
// ChromeとSafari用
.scrollbar::-webkit-scrollbar {
display: none;
}ちなみにスクロールバーのデザインを変更することもできますよ↓
【簡単】CSSでスクロールバーのデザイン変更【カスタマイズ可能】 【解決】CSSでスクロールバーを非表示にする方法【全ブラウザ】：まとめ
- スクロールバーは非表示に可能
- ブラウザによって記述するCSSが異なる
ジト
スクロールバーを非表示にする時はためしてみてね！
