CSS怎么設置滾動條樣式

這篇文章主要講解了“CSS怎么設置滾動條樣式”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS怎么設置滾動條樣式”吧！

　　滾動條設置Html代碼

　　<styletype="text/css">

　　/*ie滾動條樣式*/

　　*{

　　scrollbar-arrow-color:rgb(200,200,200);/*ok-上下三角箭頭*/

　　scrollbar-3dlight-color:rgb(200,200,200);/*ok-3d滑塊左上角高光部分顏色*/

　　scrollbar-highlight-color:rgb(200,200,200);/*ok-滑塊左上角高光部分顏色*/

　　scrollbar-shadow-color:rgb(200,200,200);/*ok*/

　　scrollbar-darkshadow-color:rgb(200,200,200);/*ok-以上都是定義一些陰影高光等3D效果*/

　　scrollbar-face-color:rgb(200,200,200);/*ok-滑塊*/

　　scrollbar-track-color:rgb(240,240,240);/*ok-滑道*/

　　}

　　/*chrome滾動條樣式*/

　　::-webkit-scrollbar{/*滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等。*/

　　width:10px;

　　height:10px;

　　}

　　::-webkit-scrollbar-button{/*滾動條兩端的按鈕?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。*/

　　display:none;

　　}

　　::-webkit-scrollbar-track{/*外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。*/

　　display:none;

　　滾動條設置組成部分

　　1.::-webkit-scrollbar滾動條整體部分

　　2.::-webkit-scrollbar-thumb滾動條里面的小方塊，能向上向下移動（或向左向右移動）

　　3.::-webkit-scrollbar-track滾動條的軌道（里面裝有Thumb）

感謝各位的閱讀，以上就是“CSS怎么設置滾動條樣式”的內容了，經(jīng)過本文的學習后，相信大家對CSS怎么設置滾動條樣式這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！