滾動條是一個可移動的欄，通常位于屏幕的最右側(cè)或底部。滾動條可以水平安裝或垂直安裝，允許用戶上下或左右移動窗口。換句話說，滾動條是在用戶和系統(tǒng)窗口顯示之間創(chuàng)建交互的小部件或技術(shù)，其滾動連續(xù)的圖片或文本或任何類型的顯示。滾動條包含一個“BAR”或俗稱“TRACK”，該滾動條有一個“THUMB”，用于上下或左右移動窗口內(nèi)容。在本主題中，我們將學(xué)習(xí)滾動條顏色。
一般來說，你看到的滾動條通常是塊狀的，顏色是灰色的。但滾動條的默認(rèn)顏色和其他屬性可以使用 CSS 或 JavaScript 或兩者來操作和自定義。
在接下來的部分中，我們將嘗試創(chuàng)建使用 CSS 和 Javascript 操作的滾動條。
自定義滾動條顏色
顏色屬性只是幫助設(shè)置不同的顏色，而不是“拇指”的默認(rèn)灰色和通常的軌道顏色。我們都知道滾動條的背景區(qū)域顏色（無論用戶向哪個方向滾動，通常都是固定的）被稱為“TRACK”。而移動部分，實際上是隨著滾動窗口一起滾動，它漂浮在軌道上，被稱為“THUMB”。
下面是解釋軌道和拇指的可視化示例圖。
上圖是一個信息溢出的網(wǎng)頁的簡單表示。用戶必須點擊拇指并上下拖動才能查看完整信息。
上圖中可以看到的滾動條是一個基于默認(rèn)瀏覽器的滾動條，具有默認(rèn)值。我們一直在談?wù)撃J(rèn)值；我們也來看看他們吧。
-
： 定義滾動條的顏色及其默認(rèn)值，如下所示： - auto：如果程序員沒有給出任何特定的顏色或?qū)傩?，“auto”是滾動條軌跡的默認(rèn)屬性。
- dark：“dark”屬性，如果提供，會顯示一個深色滾動條，它可以是瀏覽器或平臺提供的較暗顏色之一，也可以是由你。
- light： ‘light’屬性顯示平臺提供的顏色或您為滾動條設(shè)置的顏色的較淺陰影。
-
: 第一個顏色表示滾動條滑塊的顏色，第二個顏色表示軌道的顏色。
屬性缺點是有限的，僅在特定版本及以上的瀏覽器上受支持。例如，Chrome 81及以上版本支持該屬性，F(xiàn)irefox 72及以上版本也支持該屬性，等等。為了避免這種情況，我們使用另一個名為“-webkit-”屬性的屬性。
Opera、Chrome、Safari 等瀏覽器都是 -webkit- 瀏覽器，因此支持稱為“:: -webkit-scrollbar”元素的非標(biāo)準(zhǔn)偽元素，這使我們可以輕松更改滾動條與瀏覽器無關(guān)。
默認(rèn)情況下，這些屬性設(shè)置為“自動”，在操作時，可以創(chuàng)建非常有趣的視覺效果。這些元素添加到代碼頂部的
中（見下文）。部分來自定義瀏覽器的默認(rèn)滾動條屬性。滾動條顏色示例
我們創(chuàng)建了以下寬度為 18 像素的簡單滾動條示例。我們給它一個黃色的粘性顏色和綠葉綠條或手柄顏色。
<style>
/* width */
::-webkit-scrollbar {
width: 18px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
}
</style>
還可以向滾動條或手柄添加一個屬性，“::-webkit-scrollbar-thumb:hover”，它可以幫助您在滾動條懸停時為滾動條設(shè)置不同的顏色。
要向我們的欄或手柄添加“懸?！睂傩?，我們只需將以下代碼行添加到我們的腳本中；
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}
結(jié)果如下圖所示：
將鼠標(biāo)懸停在我們的綠葉色條上時會變?yōu)樽厣?/p>
讓我們看另一個探索更多屬性的例子。在下面的示例中，我們使用邊框半徑屬性平滑了條和拇指。有趣的是創(chuàng)建按鈕，讓用戶可以通過單擊按鈕而不是拖動欄來輕松移動軌道上的欄。
我們添加了以下代碼來創(chuàng)建我們自己的自定義按鈕：
/* 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
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.
以上是滾動條顏色的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
初學(xué)者的基本HTML標(biāo)簽
Jul 27, 2025 am 03:45 AM
要快速入門HTML，只需掌握幾個基礎(chǔ)標(biāo)簽即可搭建網(wǎng)頁骨架。1.頁面結(jié)構(gòu)必備、和，其中是根元素，包含元信息，是內(nèi)容展示區(qū)域。2.標(biāo)題使用到，級別越高數(shù)字越小，正文用標(biāo)簽分段，避免跳級使用。3.鏈接使用標(biāo)簽并配合href屬性，圖片使用標(biāo)簽并包含src和alt屬性。4.列表分為無序列表和有序列表，每個條目用表示且必須嵌套在列表中。5.初學(xué)者不必強(qiáng)記所有標(biāo)簽，邊寫邊查更高效，掌握結(jié)構(gòu)、文本、鏈接、圖片和列表即可制作基礎(chǔ)網(wǎng)頁。
影子dom概念和HTML集成
Jul 24, 2025 am 01:39 AM
ShadowDOM是Web組件技術(shù)中用于創(chuàng)建隔離DOM子樹的技術(shù)。1.它允許在普通HTML元素上掛載獨立的DOM結(jié)構(gòu)，擁有自己的樣式和行為，不與主文檔互相影響；2.通過JavaScript創(chuàng)建，例如使用attachShadow方法并設(shè)置mode為open；3.結(jié)合HTML使用時具備結(jié)構(gòu)清晰、樣式隔離和內(nèi)容投影（slot）三大特點；4.注意事項包括調(diào)試復(fù)雜、樣式作用域控制、性能開銷及框架兼容性問題?？傊?，ShadowDOM提供了原生封裝能力，適用于構(gòu)建可復(fù)用且不污染全局的UI組件。
html'樣式”標(biāo)簽：內(nèi)聯(lián)與內(nèi)部CSS
Jul 26, 2025 am 07:23 AM
樣式放置方式需根據(jù)場景選擇。1.Inline適合單元素臨時修改或JS動態(tài)控制，如按鈕顏色隨操作變化；2.內(nèi)部CSS適合頁面少、結(jié)構(gòu)簡單項目，便于集中管理樣式，如登錄頁基礎(chǔ)樣式設(shè)置；3.優(yōu)先考慮復(fù)用性、維護(hù)性及性能，大項目拆分外鏈CSS文件更優(yōu)。
為什么我的圖像未顯示在HTML中？
Jul 28, 2025 am 02:08 AM
圖像未顯示通常因文件路徑錯誤、文件名或擴(kuò)展名不正確、HTML語法問題或瀏覽器緩存導(dǎo)致。1.確保src路徑與文件實際位置一致，使用正確的相對路徑；2.檢查文件名大小寫及擴(kuò)展名是否完全匹配，并通過直接輸入URL驗證圖片能否加載；3.核對img標(biāo)簽語法是否正確，確保無多余字符且alt屬性值恰當(dāng)；4.嘗試強(qiáng)制刷新頁面、清除緩存或使用隱身模式排除緩存干擾。按此順序排查可解決大多數(shù)HTML圖片顯示問題。
您可以在另一個標(biāo)簽中放置一個標(biāo)簽嗎？
Jul 27, 2025 am 04:15 AM
?Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.?Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph
html'鏈接”預(yù)取DNS
Jul 23, 2025 am 02:19 AM
提前解析DNS能加快頁面加載速度，使用HTML的link標(biāo)簽進(jìn)行DNS預(yù)解析是有效方法；DNSPrefetching是通過提前解析域名，節(jié)省后續(xù)請求時間；適用場景包括第三方字體、廣告統(tǒng)計腳本、資源托管和CDN域名；建議優(yōu)先處理主頁面依賴資源，合理控制數(shù)量在3～5個，并搭配preconnect使用效果更佳。
如何編寫基本的HTML5頁模板？
Jul 26, 2025 am 07:23 AM
聲明文檔為HTML5，避免瀏覽器進(jìn)入怪異模式；2.定義根元素并指定語言以提升可訪問性和SEO；3.中包含確保正確字符編碼，實現(xiàn)響應(yīng)式設(shè)計，設(shè)置頁面標(biāo)題；4.放置所有可見內(nèi)容，可選添加CSS、favicon和JavaScript鏈接；該模板結(jié)構(gòu)完整、兼容現(xiàn)代瀏覽器，適用于任何新HTML文件。
輸入標(biāo)簽中的名稱屬性是什么？
Jul 27, 2025 am 04:14 AM
thenAmeatTributeInAninputTagisusIfe to IndentifyTheInputWhentheFormisSubSted; iservesAsTheKeyInthekey-ValuePairsentTotheserver，wheretheuser'sinputisthevalue.1.whenaformented，
