【记坑】css自定义滚动条样式的一坑

前端通过css自定义修改页面滚动条样式时，如何在保证其触发范围（即width的大小）的前提下，让其尽可能小尺寸的显示，以提升用户体验？

1.设置scroll-bar的width和height为一定尺寸（如18px）。仅此不行，滚动条就会以18px显示，会出现大黑边，需求下用户观感太差。

2. 通过设置滑块的border样式，以缩小滚动条的可视尺寸。

【注意】此时，需设置thumb的background-clip属性值为padding-box，以禁止让滚动条的背景色拓展到border。并设置border的颜色为transparent，以兼容其他任意背景颜色。

完整代码如下：

::-webkit-scrollbar {  
    width: 18px;  
    height: 18px;
}
::-webkit-scrollbar-thumb {  
    border-radius: 8px;  
    background-color: @webkit-scrollbar-thumb;  
    background-clip: padding-box;  
    border: 8px solid transparent;
}
::-webkit-scrollbar-corner {  
    background-color: transparent;
}