CSSを使用してブラウザのスクロールバーをカスタマイズする方法

序章

カスタムスクロールバーの人気が高まっており、独自のスクロールバーを備えたWebサイトに出くわしたことがあるかもしれません。これにより、サイトの感触や見た目が異なります。カスタムスクロールバーを実装するには、基本的にいくつかの方法があります。

このチュートリアルでは、最も簡単な方法であるCSS3を使用します。ただし、スクロールバーのカスタマイズに役立つjQueryプラグインはありますが、自分のWebサイトにJavaScriptを追加するのは好きではありません。デザイナー、写真家、またはWebサイトにクールなスクロールバーを表示したい場合は、jQueryプラグインを使用してください。

スクロールバーの用語を理解する

カスタムスクロールバーは、-webkitベンダープレフィックスの背後に公開されており、Webkit（およびBlink）レンダリングエンジンを使用するブラウザーで使用できます。

-webkit-scrollbarは、7つの異なる疑似要素で構成され、完全なスクロールバーUI要素を一緒に構成します。

::-webkit-scrollbarバー自体の背景。
::-webkit-scrollbar-buttonスクロールバーの方向ボタン。
::-webkit-scrollbar-trackプログレスバーの「下」の空きスペース。
::-webkit-scrollbar-track-pieceプログレスバーの最上層が親指で覆われていません。
::-webkit-scrollbar-thumbドラッグ可能なスクロール要素は、スクロール可能な要素のサイズに応じてサイズが変更されます。
::-webkit-scrollbar-corner2つのスクロールバーが出会うスクロール可能な要素の下隅。
::-webkit-resizer一部の要素の下隅のスクロールバーコーナーの上に表示されるドラッグ可能なサイズ変更ハンドル。

用語に慣れてきたので、始めましょう。

プロジェクトの設定

まず、index.htmlおよびstyle.cssファイルを作成し、コードエディタで現在のディレクトリを開きます。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Customize the Browser's Scrollbar with CSS</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="scrollbar" id="style-1">
            <div class="force-overflow"></div>
        </div>
    </body>
</html>

HTMLファイルにstyle.cssファイルを含める必要があります。上記のHTMLコードを入力するか、コピーしてHTMLファイルに貼り付けることができます。

まず、.scrollbar（クラス）width, height, background-colorを設定し、次にoverflow-y: scrollを設定して垂直スクロールバーを取得します。 min-height: 450pxを.force-overflowdivに設定して、スクロールバーが表示されるようにします（overflow-yプロパティを使用して.scrollbarクラスをスクロールしたため）。

styles.css

.scrollbar {
    background-color: #F5F5F5;
    float: left;
    height: 300px;
    margin-bottom: 25px;
    margin-left: 22px;
    margin-top: 40px;
    width: 65px;
    overflow-y: scroll;
}

.force-overflow {
    min-height: 450px;
}

ここで、カスタムスクロールバーを作成するためにスクロールバー疑似要素を使用します。デフォルトの幅を6pxの新しい幅に置き換えてから、background-color: #F5F5F5を追加します。

styles.css

#style-1::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

スクロールバーにはtrack、button、thumbが含まれていることがわかっているので、親指にスタイリッシュな外観を与えます。 -webkitプレフィックス付きの疑似要素（つまり、::-webkit-scrollbar-thumb）を使用し、scrollbar-thumbbackground- colorを設定します。

styles.css

#style-1::-webkit-scrollbar-thumb {
    background-color: #000000;
}

その後、スクロールバーは次のようになります。

scrollbar-trackでbox-shadowを使用してスタイリッシュにし、スクロールバーとスクロールバートラックの間にコントラストを追加します。

styles.css

#style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

結論

この記事では、以下について説明しました。

カスタマイズされたスクロールバーはもう珍しくありません。あなたはそれらを主要なウェブサイトやブログ、特に個人のポートフォリオのウェブサイトで見つけるでしょう。
スクロールバーのカスタマイズに役立つjQueryプラグインはたくさんあります。
カスタムスクロールバーは、-webkitベンダープレフィックスの後ろに表示されます。
スクロールバーの基本構造。
スクロールバーに関連する用語。

スクロールバーをカスタマイズするCSSの方法は単純ですが、少しラフに見えます。ただし、Windows、OS X、Linuxなどのオペレーティングシステムには、スクロールバーの独自のスタイルがあります。これは見返りに、設計に望ましくない結果と不整合をもたらす可能性があります。覚えておいてください、あなたはそれを単純で愚か（KISS）に保つべきであり、あまり派手ではありません。

上記の手順を使用して、さらにスクロールバーを作成しました。デモにはcodePenを使用しました。このチュートリアルの完全なコードは、CodePenにあります。

それで全部です。気に入ってくれるといいな！

以下のコメントに、考え、質問、懸念事項を残してください。私はそれらを見たいです。

謝辞

@twholman Codepen