webkit的浏览器中CSS自定义滚动条样式

作者: 柠檬信息技术有限公司 | 来源:发表于2018-04-12 08:57 被阅读38次

最近在做自动化测试工具，界面之前采用JavaFX进行展示，但是考虑到后期要出前后端分离的web端，所以将UI部分全部用H5重写了一遍。这个工具是全平台的，Linux、Windows、macOS中的UI样式要尽可能统一，滚动条的样式当然也要统一，所以使用CSS进行重定义滚动条样式，为了方便，记录一下:

我的task-list-content的内容过长，使用了overflow:scroll;

.task-list-content::-webkit-scrollbar
{
  width: 6px;  /*纵向滚动条宽度*/
  height: 6px;  /*横向滚动条高度*/
}

.task-list-content::-webkit-scrollbar-track
{
  background-color: #666;/*滚动条滑道的颜色*/
}

.task-list-content::-webkit-scrollbar-thumb
{
  background-color: #333; /*滚动条拖动块的颜色*/
}

最后效果图如下：

自定义滚动条效果.png