CSS樣式更改滾動條的樣式

一:webkit下面的CSS設置滾動條

主要有下面7個屬性

::-webkit-scrollbar 滾動條整體部分,可以設置寬度啥的
::-webkit-scrollbar-button 滾動條兩端的按鈕
::-webkit-scrollbar-track 外層軌道
::-webkit-scrollbar-track-piece 內層滾動槽
::-webkit-scrollbar-thumb 滾動的滑塊
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式

效果圖:

css樣式

*滾動調樣式*/
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-button{
    display: none;
}
::-webkit-scrollbar-thumb{
    height: 50px;
    background-color: #999;
    outline: 2px solid white;
    outline-offset: -2px;
    border: 2px solid white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章