CSS默認滾動條樣式修改

:root {
/* 滾動條樣式屬性 */
--scroll-width: 8px;
--scroll-padding: 10px;
--scroll-track-color: #f2f2f2;
--scroll-thumb-color: #c2c2c2;
}
/* 修改縱向滾動條 */
::-webkit-scrollbar {
width: var(--scroll-width);
height: var(--scroll-width);
}
::-webkit-scrollbar-track {
background: var(--scroll-track-color);
border-radius: var(--scroll-width);
margin: var(--scroll-padding);
}
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb-color);
border-radius: var(--scroll-width);
}
/* 修改橫向滾動條 */
::-webkit-scrollbar-x {
width: var(--scroll-width);
height: var(--scroll-width);
}
::-webkit-scrollbar-x-track {
background: var(--scroll-track-color);
border-radius: var(--scroll-width);
margin: var(--scroll-padding);
}
::-webkit-scrollbar-x-thumb {
background: var(--scroll-thumb-color);
border-radius: var(--scroll-width);
}

CSS允許我們修改頁面中的各種樣式，包括滾動條樣式。在默認情況下，瀏覽器會為頁面的滾動條提供一組默認的樣式。但是，如果您想要自定義滾動條樣式，CSS允許您通過修改偽元素的屬性來實現這一點。

首先，在root偽元素中定義一些自定義樣式屬性，如滾動條寬度、填充、軌道顏色和拇指顏色。接下來，您可以使用-webkit-scrollbar偽元素來修改頁面中的滾動條樣式。

要修改縱向滾動條，請使用::-webkit-scrollbar。使用width屬性來定義滾動條的寬度和高度，然后使用::-webkit-scrollbar-track偽元素來定義滾動條的軌道顏色和圓角半徑。最后，使用::-webkit-scrollbar-thumb偽元素來定義滾動條拇指的顏色和圓角半徑。

要修改橫向滾動條，請使用::-webkit-scrollbar-x和::-webkit-scrollbar-x-track和::-webkit-scrollbar-x-thumb偽元素，具體方法和修改縱向滾動條類似。

通過上述方式，您即可自定義網站的滾動條樣式，為用戶提供更加優秀的瀏覽體驗。