ホームページ >ウェブフロントエンド >htmlチュートリアル >スクロールバーの色

スクロールバーの色

王林オリジナル: 2024-09-04 16:36:11661ブラウズ

スクロールバーは移動可能なバーで、通常は画面の右端または下部にあります。スクロールバーは水平または垂直に取り付けられており、ユーザーはウィンドウを上下または左右に移動できます。言い換えれば、スクロールバーは、ユーザーとシステムウィンドウ表示の間の対話を作成するウィジェットまたは技術であり、連続した画像、テキスト、またはあらゆる種類の表示をスクロールします。スクロールバーには「BAR」または一般に「TRACK」として知られるものが含まれており、このバーにはウィンドウの内容を上下または左右に移動するために使用される「THUMB」があります。このトピックでは、スクロールバーの色について学習します。

通常、スクロールバーはブロック状で、色は灰色です。ただし、スクロールバーのデフォルトの色やその他のプロパティは、CSS または JavaScript、あるいはその両方を使用して操作およびカスタマイズできます。

次のセクションでは、CSS と Javascript を使用して操作されるスクロールバーを作成してみます。

スクロールバーの色のカスタマイズ

color プロパティは、「親指」のデフォルトのグレーや通常のトラックの色以外の別の色を設定するのに役立ちます。スクロールバーの背景領域の色 (通常、ユーザーがどの方向にスクロールしても固定されます) が「トラック」として知られていることは誰もが知っています。そして、実際にスクロールウィンドウと一緒にスクロールし、トラック上に浮かんでいる可動部分は「THUMB」と呼ばれます。

以下は、トラックとサムを説明する図の例です。

スクロールバーの色

上の画像は、情報が溢れている Web ページを単純に表したものです。完全な情報を表示するには、ユーザーはサムをクリックして上下方向にドラッグする必要があります。

上の画像に表示されているスクロールバーは、デフォルト値が設定されたデフォルトのブラウザベースのスクロールバーです。私たちはデフォルト値について話し続けています。そちらも見てみましょう。

: スクロールバーの色とそれに含まれるデフォルト値を以下のように定義します:
auto: プログラマが特定の色やプロパティを指定していない場合、「auto」はスクロールバーのトラックのデフォルトのプロパティです。
dark: 'dark' プロパティを指定すると、ブラウザーまたはプラットフォームによって提供される色のより暗い色合い、またはによって定義される色のより暗い色合いのいずれかである暗いスクロールバーが表示されます。あなた。
light: 「light」プロパティは、プラットフォームが提供する色、またはスクロールバーに設定した色の明るい色合いを示します。
: 最初の色はスクロールバーのサムの色を表し、2 番目の色はトラックの色を表します。

プロパティの欠点は制限されており、特定のバージョン以降のブラウザでのみサポートされます。たとえば、このプロパティは Chrome のバージョン 81 以降、Firefox のバージョン 72 以降などでサポートされています。これを回避するために、「-webkit-」プロパティと呼ばれる別のプロパティを使用します。

Opera、Chrome、Safari などのブラウザは -webkit- ブラウザであるため、「:: -webkit-scrollbar」要素と呼ばれる非標準の疑似要素をサポートしています。これにより、スクロールバーを簡単に変更できます。ブラウザに関係なく。

プロパティはデフォルトで「自動」に設定されており、これを操作すると非常に興味深いビジュアルを作成できます。これらの要素は、コードの先頭のに追加されます (以下を参照)。セクションを使用して、ブラウザのデフォルトのスクロールバーのプロパティをカスタマイズします。

スクロールバーの色の例

幅 18 ピクセルの単純なスクロールバーの次の例を作成しました。イエローのタックカラーにリーフィーグリーンのバーやハンドルのカラーを加えました。

スクロールバーの色

<style>
/* width */
::-webkit-scrollbar {
width: 18px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
}
</style>

バーまたはハンドルにもう 1 つのプロパティ「::-webkit-scrollbar-thumb:hover」を追加できます。これにより、スクロールバーにカーソルを置いたときに別の色を設定できます。

バーまたはハンドルに「ホバーオーバー」プロパティを追加するには、次のコード行をスクリプトに追加するだけです。

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}

その結果は以下のスクリーンショットで確認できます:

スクロールバーの色

葉緑のバーにカーソルを置くと、茶色に変わりました。

さらに多くのプロパティを探索する別の例を見てみましょう。次の例では、border radius プロパティを使用してバーと親指を滑らかにしました。興味深いのは、ユーザーがバーをドラッグする代わりにボタンをクリックすることでトラック上のバーを簡単に移動できるようにボタンを作成することです。

独自のカスタムボタンを作成するために以下のコードを追加しました:

/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}

The above will simply display the area with a border where our buttons will appear, as shown below. This will need some customization as well.

スクロールバーの色

After our customization (see the code added) is done, we get the final result. See the results for yourselves:

スクロールバーの色

Complete code is given below:

<head>
<style>
/* Custom width for the Scrollbar */
::-webkit-scrollbar {
width: 18px;
}
/* Custom Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}
/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Custom Up Direction Button */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
/* Custom Down Direction Button */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
</style>
</head>

SimpleBar: A JavaScript Library

There is always another way to implement elements in your project. A custom scroll bar can also be added with the help of jquery plugins and javascript libraries, popular in the web market. For example, SimpleBar is the new Javascript library that makes it easier for the author to create customized scrollbars.

It’s a standalone library that adds a scroll bar to any scrollable element or component, or container which might have overflowing content. This javascript library makes your content dynamic and keeps the native scroll behavior. A simple demo is shown below.

Customization

You can easily use these javascript libraries by installing and importing them into your projects or directly including them and their CSS files (if any) on to your HTML page. In the below example, we will be using the second option, directly including a javascript library into our program.

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<strong> </strong><script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>

Adding these two lines to your HTML page will include and attach a remote file that can not be edited to your HTML like this; スクロールバーの色 Next, we will add, ‘data-simplebar’ attribute to the division or the content, which will be the scrollable container of your HTML page. In our example, we added this attribute to the tag itself. Along with this, we will require a sample text; I have added ‘Lorem Ipsum’ default text to our tag to make the web page scrollable. And that is it. Simple right? When this is all done, your web page will look like this –> スクロールバーの色 But it’s still raw and a bit ugly. I have done a few tweaks, as shown below, and see the results for your selves. The full code for CSS is given below, along with the results.

<style>
:root {  --primary: #212123;
}
body, html{          height: 100vh;
}
body{      background: var(--primary);
font-family:Georgia, "Times New Roman", Times, serif;
color: #fff;
display:grid;
grid-columns:60% auto;
margin: 0;
}
p{                            margin: 1em;
padding: 1em;
background-color: #333;
border-radius:10px;
color: #99F;
}
h2 {         color: #996;
}
.simplebar-scrollbar:before{background-color:#0F0;
}
.simplebar-scrollbar{margin-right:3px;
}
</style>

And the result is, as you can see below;

スクロールバーの色

You can manually configure the javascript libraries as well, but then you need to initialize them first and then configure them; an option is known as ‘override’ is used, passing the object as a parameter of our Simplebar Function.

You can design it as you want since this library is lightweight. It has a simplebar.js file, a vanilla javascript custom scroll bar plugin that ensures great performance and works with all browsers.

以上がスクロールバーの色の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript firefox jquery css chrome safari html webkit Object if for include require try auto using Attribute Property JS function default this display border background kind

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML カラーピッカー次の記事：HTML カラーピッカー

続きを見る