css3 自定义滚动条样式

::-webkit-scrollbar :滚动条整体部分

::-webkit-scrollbar-thumb ：滚动条里面的小方块样式

::-webkit-scrollbar-track 滚动条的轨道

::-webkit-scrollbar-button 滚动条轨道两端的小按钮，允许通过点击微调小方块的位置

::-webkit-scrollbar-track-piece 内层轨道，

::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

::-webkit-resizer 两个滚动条交汇处上用于通过拖动调整元素大小的小控价

/* Let's get this party started */

::-webkit-scrollbar {

    width: 5px;

}

/* Track */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    -webkit-border-radius: 5px;

    border-radius: 21px;

}

/* Handle */

::-webkit-scrollbar-thumb {

    -webkit-border-radius:5px;

    border-radius: -9px;

    background: #2f732f;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

	background: #6a9a6d;

}

巴特西

css3 自定义滚动条样式

最新文章

热门文章