スクロール バーは移動可能なバーで、通常は画面の右端または下部にあります。スクロール バーは水平または垂直に取り付けられており、ユーザーはウィンドウを上下または左右に移動できます。言い換えれば、スクロール バーは、ユーザーとシステム ウィンドウ表示の間の対話を作成するウィジェットまたは技術であり、連続した画像、テキスト、またはあらゆる種類の表示をスクロールします。スクロール バーには「BAR」または一般に「TRACK」として知られるものが含まれており、このバーにはウィンドウの内容を上下または左右に移動するために使用される「THUMB」があります。このトピックでは、スクロールバーの色について学習します。
通常、スクロール バーはブロック状で、色は灰色です。ただし、スクロール バーのデフォルトの色やその他のプロパティは、CSS または JavaScript、あるいはその両方を使用して操作およびカスタマイズできます。
次のセクションでは、CSS と Javascript を使用して操作されるスクロール バーを作成してみます。
color プロパティは、「親指」のデフォルトのグレーや通常のトラックの色以外の別の色を設定するのに役立ちます。スクロール バーの背景領域の色 (通常、ユーザーがどの方向にスクロールしても固定されます) が「トラック」として知られていることは誰もが知っています。そして、実際にスクロール ウィンドウと一緒にスクロールし、トラック上に浮かんでいる可動部分は「THUMB」と呼ばれます。
以下は、トラックとサムを説明する図の例です。
上の画像は、情報が溢れている Web ページを単純に表したものです。完全な情報を表示するには、ユーザーはサムをクリックして上下方向にドラッグする必要があります。
上の画像に表示されているスクロール バーは、デフォルト値が設定されたデフォルトのブラウザベースのスクロール バーです。私たちはデフォルト値について話し続けています。そちらも見てみましょう。
プロパティの欠点は制限されており、特定のバージョン以降のブラウザでのみサポートされます。たとえば、このプロパティは 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>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.
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
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
