專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-09-15 09:25:28 來源：動力節點 瀏覽3465次
大家在Java教程中會學到CSS，下面我們就來了解一下CSS中div滾動條樣式設置。
曾經有一個自定義滾動條只是 webkit，所以 Firefox 和 IE 被淘汰了。我們有一個只在 Firefox 中有效的新語法，當它被完全支持時，它會讓我們的工作變得更容易。下面將介紹舊的 Webkit 語法，然后是新的語法。
滾動條寬度
首先，我們需要定義滾動條的大小。這可以是垂直滾動條的寬度和水平滾動條的高度。
.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);
}
至此，我們已經介紹了在 CSS 中設置自定義滾動條樣式的舊方法。讓我們探索新的語法。
滾動條寬度
正如它所說，這定義了滾動條的寬度，我們最關心的值是auto和thin。不幸的是，我們不能像 webkit 語法那樣定義一個特定的數字。
.section {
scrollbar-width: thin;
}
滾動條顏色
使用此屬性，我們可以將滾動條軌道和拇指的顏色定義為對值。
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
就像這種新語法一樣簡單，但它是有限制的。我們只能應用純色。我們不能添加陰影、漸變、圓角或類似的東西。我們可以自定義的只是顏色。
滾動條裝訂線
你有沒有想過當內容在滾動容器中增長時我們如何避免布局變化?讓我們看下面的案例。
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
}
我們有一個16px四面都有填充物的容器。到現在為止，內容很短，滾動條沒有顯示，因為overflow-y: auto被使用(友情提示：當auto被使用時overflow-y，直到內容很長才會顯示滾動條)。
當內容增長時，將顯示滾動條，因此可用于內容的空間將減少。
注意當有滾動條時內容是如何移動的。那是因為瀏覽器應該為滾動條保留空間。
值得慶幸的是，現在可以通過scrollbar-gutter(在基于 Chromium 的瀏覽器 v94+ 中支持)來解決這個問題。它的工作方式可以讓我們提前預訂空間。默認值為auto，其他值為stable。還值得一提的是，有一個可選值both-edges顯示兩側的排水溝。
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
scrollbar-gutter: stable;
}
要知道的重要一點是自定義滾動條的位置。您是否希望樣式通用并適用于網站上的所有滾動條?還是您只希望它用于特定部分?
使用舊語法，我們可以編寫選擇器而不將它們附加到元素，它們將應用于所有可滾動元素。
::-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);
}
但是，如果您只想申請特定部分，則需要在選擇器之前附加該元素。
.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);
}
對于新的語法，幾乎是一樣的。如果你想要一個通用樣式，它應該應用于<html>元素，而不是<body>.
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
以上就是關于“CSS中div滾動條樣式設置”的介紹，大家如果想了解更多相關知識，可以關注一下動力節點的CSS視頻教程，里面的課程內容由淺到深，通俗易懂，適合小白學習，希望對大家能夠有所幫助。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號