溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS中div滾動條樣式如何設置”，在日常操作中，相信很多人在CSS中div滾動條樣式如何設置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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滾動條樣式如何設置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
