Html 滚动条的自定义Css

我正在寻找定制的滚动条css。请查看附件中的图片和下面的代码示例 我需要滚动条拇指上的三行，如下图所示。 我们是否必须在拇指上添加图像，或者是否可以使用任何类型的渐变样式？感谢您的帮助

：：-webkit滚动条轨迹
{
-webkit盒阴影：插入0.0 6px rgba（0,0,0,0.3）；
背景色：#6c7a85；
}
：-webkit滚动条
{
宽度：10px；
背景色：#F5；
}
：-webkit滚动条拇指
{
背景色：#64b6fd；
}

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

只需将背景图像设置在

：-webkit滚动条拇指中即可

::-webkit-scrollbar-thumb {
 background: url('https://www.pngjoy.com/pngl/41/952512_hamburger-icon-menubuttom-hamburger-menu-icon-white-transparent.png') #64b6fd;
 background-size:8px 16px;
background-repeat:no-repeat;
background-position:center;
}

更新的代码片段：


：：-webkit滚动条轨迹{
-webkit盒阴影：插入0 0 6px rgba（0,0,0,0.3）；
背景色：#6c7a85；
}
：-webkit滚动条{
宽度：10px；
背景色：#F5；
}
：-webkit滚动条拇指{
背景：url（'https://www.pngjoy.com/pngl/41/952512_hamburger-icon-menubuttom-hamburger-menu-icon-white-transparent.png"#64b6fd ;；
背景尺寸：8px 16px；
背景重复：无重复；
背景位置：中心；
}

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据

测试数据