CSS讓滾動(dòng)條有過渡效果

::-webkit-scrollbar { /* 控制滾動(dòng)條的樣式 */
width: 6px; /* 設(shè)置滾動(dòng)條的寬度 */
}
::-webkit-scrollbar-thumb {
background-color: #666; /* 設(shè)置滾動(dòng)條的背景顏色 */
border-radius: 3px; /* 設(shè)置滾動(dòng)條的圓角 */
}
body {
/* 添加過渡效果 */
transition: all .3s ease;
}
body::-webkit-scrollbar-thumb {
/* 鼠標(biāo)懸停時(shí)改變滾動(dòng)條的顏色 */
&:hover {
background-color: #999;
}
}

上面這段代碼可以讓頁面的滾動(dòng)條擁有過渡效果，同時(shí)也會(huì)美化滾動(dòng)條的樣式。在 ::-webkit-scrollbar 中，可以調(diào)整滾動(dòng)條的寬度和顏色等基本樣式。

在 body 中，添加 transition 屬性可以讓滾動(dòng)條的樣式變化更加自然。在 body::-webkit-scrollbar-thumb 中添加 &:hover，可以讓當(dāng)鼠標(biāo)懸停在滾動(dòng)條上時(shí)，滾動(dòng)條的顏色改變，讓用戶的操作更加明顯。

這段代碼可以增強(qiáng)用戶體驗(yàn)，如果你有需要，可以根據(jù)自己的需求來調(diào)整樣式。