メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

今回はスクロールバーのデザインをCSSだけでカスタマイズしていこうと思います。すごく簡単です。

普通にブラウザの右側に出てくるスクロールバーは見慣れているので気にならないもの、コンテンツの中でスクロールさせたい時にでてくるスクロールバーのダサさが気になりすぎて。

 

目次

    スクロールバーをカスタマイズする時の基本知識

    以下のサイトがすごく詳しくまとめてくれています。

    WebKitを使ってスクロールバーをカスタマイズ

    でも簡単なカスタマイズをする時にはこんなたくさんに知識は必要ないと思うので、実際に私が扱った要素だけ紹介します。

    • ::-webkit-scrollbar
    • ::-webkit-scrollbar-track
    • ::-webkit-scrollbar-thumb

    以上の3要素だけです。

    カスタマイズ例

    では、実際にどう記述すればどうなるか。

    まずは当サイト全体で使用しているスクロールバーの実装方法から紹介します。

    ページのスクロールバーは独特なものにしすぎても逆にわかりにくいので、Macのスクロールバーを真似て作りました。

    コンセプトは、Windowではシンプルに。Macユーザーは見慣れたもののままで。

    ::-webkit-scrollbar{
      width: 12px;
    }
    ::-webkit-scrollbar-track{
      background: #fff;
      border-left: solid 1px #ececec;
    }
    ::-webkit-scrollbar-thumb{
      background: #ccc;
      border-radius: 10px;
      box-shadow: inset 0 0 0 2px #fff;
    }
    

     

    次に、ソースコードを表示するpreタグに使用しているスクロールバーです。

    pre::-webkit-scrollbar{
      height: 10px;
    }
    
    pre::-webkit-scrollbar-track{
      background: transparent;
      border:none;
    }
    
    pre::-webkit-scrollbar-thumb{
      background: transparent;
      border-radius: 10px;
      box-shadow: inset 0 0 8px rgba(255,255,255,0.8);
    }
    
    /* このコメントはスクロールさせるために書いています。スクロールさせてみてくださーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい。 */
    

    こんなのも

    枠も丸くしたいなら。下のような感じ。









    このソースは以下です。

    div::-webkit-scrollbar{
      width: 12px;
    }
    div::-webkit-scrollbar-track{
      background: #fff;
      border: none;
      border-radius: 10px;
      box-shadow: inset 0 0 2px #777; 
    }
    div::-webkit-scrollbar-thumb{
      background: #aaa;
      border-radius: 10px;
      box-shadow: none;
    }

    他にも好きなようにアレンジしてみてください。

     

    また、スマホでのスクロールに慣性をつけてなめらかにする方法もメモしていますので、こちらも是非さんこうにしてみてください。

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top