自定義谷歌瀏覽器滾動條的樣式


在項目中常常會遇到美化瀏覽器自帶滾動條的需求,以下是自定義谷歌瀏覽器滾動條的樣式代碼:

::-webkit-scrollbar {
	width: 5px;/*豎向滾動條的寬度*/
	height: 5px;/*橫向滾動條的高度*/
}
/*滾動條軌道的樣式*/
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
/*滾動條軌道內滑塊的樣式*/
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(155,155,155,0.8);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*當焦點不在當前區域滑塊的狀態(具體為什么要加這句有點忘了,記得是跟刷新時有關)*/
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(155,155,155,0.4);
}

更多詳細設置,請參考原文:
原文鏈接:http://www.xuanfengge.com/css3-webkit-scrollbar.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM