專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-09-15 09:25:28 來源：動力節(jié)點 瀏覽3327次
大家在Java教程中會學(xué)到CSS，下面我們就來了解一下CSS中div滾動條樣式設(shè)置。
曾經(jīng)有一個自定義滾動條只是 webkit，所以 Firefox 和 IE 被淘汰了。我們有一個只在 Firefox 中有效的新語法，當(dāng)它被完全支持時，它會讓我們的工作變得更容易。下面將介紹舊的 Webkit 語法，然后是新的語法。
滾動條寬度
首先，我們需要定義滾動條的大小。這可以是垂直滾動條的寬度和水平滾動條的高度。
.section::-webkit-scrollbar {
width: 10px;
}
使用該設(shè)置，我們可以設(shè)置滾動條本身的樣式。
滾動條軌道
這表示滾動條的底部。我們可以通過添加背景顏色、陰影、邊框半徑和邊框來設(shè)置它的樣式。
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
滾動條拇指
一旦我們準(zhǔn)備好滾動條的底部，我們需要設(shè)置滾動條拇指的樣式。這很重要，因為用戶可能會拖動此拇指與滾動條進行交互。
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
至此，我們已經(jīng)介紹了在 CSS 中設(shè)置自定義滾動條樣式的舊方法。讓我們探索新的語法。
滾動條寬度
正如它所說，這定義了滾動條的寬度，我們最關(guān)心的值是auto和thin。不幸的是，我們不能像 webkit 語法那樣定義一個特定的數(shù)字。
.section {
scrollbar-width: thin;
}
滾動條顏色
使用此屬性，我們可以將滾動條軌道和拇指的顏色定義為對值。
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
就像這種新語法一樣簡單，但它是有限制的。我們只能應(yīng)用純色。我們不能添加陰影、漸變、圓角或類似的東西。我們可以自定義的只是顏色。
滾動條裝訂線
你有沒有想過當(dāng)內(nèi)容在滾動容器中增長時我們?nèi)绾伪苊獠季肿兓?讓我們看下面的案例。
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
}
我們有一個16px四面都有填充物的容器。到現(xiàn)在為止，內(nèi)容很短，滾動條沒有顯示，因為overflow-y: auto被使用(友情提示：當(dāng)auto被使用時overflow-y，直到內(nèi)容很長才會顯示滾動條)。
當(dāng)內(nèi)容增長時，將顯示滾動條，因此可用于內(nèi)容的空間將減少。
注意當(dāng)有滾動條時內(nèi)容是如何移動的。那是因為瀏覽器應(yīng)該為滾動條保留空間。
值得慶幸的是，現(xiàn)在可以通過scrollbar-gutter(在基于 Chromium 的瀏覽器 v94+ 中支持)來解決這個問題。它的工作方式可以讓我們提前預(yù)訂空間。默認值為auto，其他值為stable。還值得一提的是，有一個可選值both-edges顯示兩側(cè)的排水溝。
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
scrollbar-gutter: stable;
}
要知道的重要一點是自定義滾動條的位置。您是否希望樣式通用并適用于網(wǎng)站上的所有滾動條?還是您只希望它用于特定部分?
使用舊語法，我們可以編寫選擇器而不將它們附加到元素，它們將應(yīng)用于所有可滾動元素。
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
但是，如果您只想申請?zhí)囟ú糠郑瑒t需要在選擇器之前附加該元素。
.section::-webkit-scrollbar {
width: 10px;
}
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
對于新的語法，幾乎是一樣的。如果你想要一個通用樣式，它應(yīng)該應(yīng)用于<html>元素，而不是<body>.
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
以上就是關(guān)于“CSS中div滾動條樣式設(shè)置”的介紹，大家如果想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點的CSS視頻教程，里面的課程內(nèi)容由淺到深，通俗易懂，適合小白學(xué)習(xí)，希望對大家能夠有所幫助。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號