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

投稿日: 2022-04-20 2022-10-12
タグ: 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-corner 2つのスクロールバーが出会うスクロール可能な要素の下隅。
::-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>

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

まず、 .scrollbar （クラス） width, height, background-color、次に設定 overflow-y: scroll 垂直スクロールバーを取得します。設定しました min-height: 450px に .force-overflow スクロールバーが表示されるようにdiv（ 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-scrollbar-thumb）と -webkit プレフィックスとスクロールバーの設定-親指 background- color.

styles.css

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

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

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

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

getdocs

13036