人人IT網

人人IT網

當前位置: 主頁 > IT新聞 > 互聯網 >

css3設置滾動條

時間:2012-12-07 00:19來源:Internet 作者:Internet 點擊:
本文簡單記錄一下webkit下美化滾動條的一些方式:   下面這張圖比較直觀,來源於互聯網,不追源了,感謝原作者。       ::-webkit-scrollbar 滾動條整體部

本文簡單記錄一下webkit下美化滾動條的一些方式:

 

下面這張圖比較直觀,來源於互聯網,不追源了,感謝原作者。

 


 

 

  1. ::-webkit-scrollbar 滾動條整體部分,一般可以設置寬度

     2.  ::-webkit-scrollbar-button 兩端的按鈕


     3.  ::-webkit-scrollbar-track 外層軌道(track本身就是軌道的意思)


     4.  ::-webkit-scrollbar-track-piece 內層滾動槽


     5.  ::-webkit-scrollbar-thumb 滑塊


     6.  ::-webkit-scrollbar-corner 邊角


     7.  ::-webkit-resizer 右下角拖動塊的样式(個人覺得這個不應該是這邊相關的样式)



  • 設置滾動條的寬度
::-webkit-scrollbar{
     width:80px;   //为了測試,用了很大的值
}
 

  • 設置滾動的軌道
::-webkit-scrollbar-track{
	background:black;      //測試明顯,用顏色來標識
	border-radius:10px;
}
 

  • 設置滾動的滑塊
::-webkit-scrollbar-thumb{
	background:#fff;    //測試用
}
 


擴展閱讀:





 


From:ITEYE
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容