CSS滚动条设置

CSS 设置滚动条样式

这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

废话不多说，直接放代码
这里#textarea是代码框的id名

#textarea::-webkit-scrollbar {    /*滚动条整体样式*/
   width: 4px;                        /*高宽分别对应横竖滚动条的尺寸*/
   height: 40px;
}
#textarea::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
   background-color: #999; /*设置滚动条颜色*/
}
#textarea::-webkit-scrollbar-track {  /*滚动条里面轨道*/
   /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
   border-radius: 10px;
   background: #fff;
}

相关API

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).