序章

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

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

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

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

Screenshot depicting the scrollbar-thumb and scrollbar-track parts to a scrollbar.

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

  1. ::-webkit-scrollbarバー自体の背景。
  2. ::-webkit-scrollbar-buttonスクロールバーの方向ボタン。
  3. ::-webkit-scrollbar-trackプログレスバーの「下」の空きスペース。
  4. ::-webkit-scrollbar-track-pieceプログレスバーの最上層が親指で覆われていません。
  5. ::-webkit-scrollbar-thumbドラッグ可能なスクロール要素は、スクロール可能な要素のサイズに応じてサイズが変更されます。
  6. ::-webkit-scrollbar-corner2つのスクロールバーが出会うスクロール可能な要素の下隅。
  7. ::-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;
}

Screenshot depicting the current default appearance of the scrollbar.

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

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

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

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

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

Screenshot of the modified scrollbar with a black scrollbar-thumb.

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

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

Screenshot of the modified scrollbar with a black scrollbar-thumb and light-colored scrollbar-track.

結論

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

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

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

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

Screenshot of a demo with many customized scrollbars in different colors and sizes.

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

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

謝辞

@twholman Codepen