【CSS】スクロールバーを設置する

このようにスクロールバーを設定してみましょう。
幅や高さに制限がある時などに設置すると、とても効果的です。
コンパクトにしたい時も良いですね！

スクロールバーの設置
おわりに

参考・引用

スクロールバーの設置

スクロールバーを設置してみましょう。
CSSの”overflow”プロパティ を利用することで簡単に設置することができます。

幅・高さのスクロールバーを設置する

では、早速やってみましょう！
今回は”style”要素を使ってHTMLに直接書き込んでみることにします。
もちろんclassから呼び出すこともできますよー。

HTML

<div style="overflow: scroll; height: 90px; width: 100%;">
　吾輩は猫である。名前はまだ無い。<br>
　どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
</div>

Result

　吾輩は猫である。名前はまだ無い。
　どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

今回、 注目すべきは1行目のdivタグ内の ”overflow: scroll;” です。
このプロパティ自体はスクロールの表示を決めると言うよりは、
要素が指定の大きさを超えた時に、どのように処理をするかということを設定します。

”overflow”は以下のように設定することができます。

設定方法	内容
overflow: visible;	指定範囲をはみ出した場合、はみ出て表示する(デフォルト)。
overflow: hidden;	指定範囲をはみ出した場合、はみ出た分は表示しない。
overflow: scroll;	指定範囲をはみ出した場合、スクロールバーを表示する。

”width” と ”height” を事前に設定しておき、
このように ”scroll” を指定すると、スクロールバーが表示されるという仕組みなわけです。

幅と高さを別々に設定する

「幅は表示したいけど、高さのバーは表示したくない」みたいなことがあるかもしれませんが、
幅は「overflow-x」、高さは「overflow-y」 のように指定すると、別々に設定できます。
例えば、幅バーは表示させるけど、高さバーを表示しない場合はこのようになります。

CSS

.sample {
  overflow-x: scroll;
  overflow-y: visible;
}

デザインを変更する・統一する

スクロールバーの表示方法はOS(例えばWindowsやmacOS、iOSなど)に依存しています。
一方で、 CSSを利用すればデザインを統一させて変更することができます。
この方法はChromeやSafari、MS Edge(Chromium)のみ対応しているようです。またiPadなどの一部は表示されません。

詳しい説明は省略しますが、このように ”webkit” を利用することでバーをカスタマイズできます。

HTML

<ul class="categories-box">
<li style="display: inline-block;" class="category-box">
  国語
</li>
<li style="display: inline-block;" class="category-box">
  算数
</li>
<li style="display: inline-block;" class="category-box">
  理科
</li>
<li style="display: inline-block;" class="category-box">
  社会
</li>
</ul>

CSS

.categories-box {
    list-style-type: none;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    width: 100%;
}

.categories-box::-webkit-scrollbar {
    /* スクロールバーの高さの設定 */
    height: 4px;
}

.categories-box::-webkit-scrollbar-track {
    border-radius: 30px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

.categories-box::-webkit-scrollbar-thumb {
    background-color: rgba(60, 60, 60, .5);
    border-radius: 10px;
    box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.category-box {
    width: 275px;
    height: 68px;
    margin: 5px 2px;
    border: none;
    border-radius: 8px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/e/exe_3Z1K/20210112/20210112012827.png");
    background-size: 100% 100%;
}