在前端開發中，CSS 中經常用到的瀏覽器滾動條樣式，可以增加頁面的美觀性和用戶體驗。

首先，我們需要清楚的認識到，不同瀏覽器的滾動條樣式是不同的，所以我們需要使用 CSS 自定義滾動條。

/*Chrome瀏覽器滾動條樣式*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}

/*Safari瀏覽器滾動條樣式*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid #bcbcbc;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
}

除了 Chrome 和 Safari 瀏覽器，Edge 和 Firefox 瀏覽器也有各自的滾動條樣式，相信大家只要查一下資料，就可以輕松找到。而在實際項目開發中，可以根據頁面風格和主題，自行定義頁面自己的滾動條樣式，讓頁面更加個性化！