捲動條顏色

王林原創: 2024-09-04 16:36:11619瀏覽

捲軸是一個可移動的欄，通常位於螢幕的最右側或底部。捲軸可以水平安裝或垂直安裝，允許使用者上下或左右移動視窗。換句話說，捲軸是在使用者和系統視窗顯示之間創建互動的小部件或技術，其滾動連續的圖片或文字或任何類型的顯示。捲軸包含一個“BAR”或俗稱“TRACK”，該捲軸有一個“THUMB”，用於上下或左右移動視窗內容。在本主題中，我們將學習滾動條顏色。

一般來說，你看到的滾動條通常是塊狀的，顏色是灰色的。但滾動條的預設顏色和其他屬性可以使用 CSS 或 JavaScript 或兩者來操作和自訂。

在接下來的部分中，我們將嘗試建立使用 CSS 和 Javascript 操作的捲軸。

自訂捲軸顏色

顏色屬性只是幫助設定不同的顏色，而不是「拇指」的預設灰色和通常的軌道顏色。我們都知道滾動條的背景區域顏色（無論用戶向哪個方向滾動，通常都是固定的）被稱為“TRACK”。而移動部分，實際上是隨著滾動視窗一起滾動，它漂浮在軌道上，稱為“THUMB”。

下面是解釋軌道和拇指的可視化範例圖。

捲動條顏色

上圖是一個資訊溢出的網頁的簡單表示。使用者必須點擊拇指並上下拖曳才能查看完整資訊。

上圖中可以看到的捲軸是一個基於預設瀏覽器的捲軸，具有預設值。我們一直在談論預設值；我們也來看看他們。

：定義捲軸的顏色及其預設值，如下所示：
auto：如果程式設計師沒有給出任何特定的顏色或屬性，「auto」是滾動條軌跡的預設屬性。
dark: 'dark' 屬性，如果提供，會顯示一個深色捲軸，它可以是瀏覽器或平台提供的較暗顏色之一，也可以是由你。
light：‘light’屬性顯示平台提供的顏色或您為捲軸設定的顏色的較淺陰影。
:第一個顏色表示滾動條滑桿的顏色，第二個顏色表示軌道的顏色。

屬性缺點是有限的，僅在特定版本及以上的瀏覽器上支援。例如，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>

也可以為捲軸或手把新增一個屬性，“::-webkit-scrollbar-thumb:hover”，它可以幫助您在捲軸懸停時為捲軸設定不同的顏色。

要為我們的欄或手把新增「懸停」屬性，我們只需將以下程式碼行新增到我們的腳本中；

/* 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;
}

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中文網其他相關文章！

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 顏色選擇器

看更多