专注app软件定制开发滚动条的默认样式是这样的：
专注app软件定制开发大灰块做背景，内嵌小灰块做滚动距离的展示。
再加上贴边的宽度，对于内容本身就比较窄的区域来说，这种样式笨重感十足！
单调且无趣！
而像这种样式的滚动条就比较可以了。
的修改是通过伪元素实现的：
-webkit-scrollbar 滚动条整体部分-webkit-scrollbar-button 滚动条两端的按钮-webkit-scrollbar-track 外层轨道-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）-webkit-scrollbar-thumb 内嵌滑块-webkit-scrollbar-corner 边角-webkit-resizer 定义右下角拖动块的样式- 1
- 2
- 3
- 4
- 5
- 6
- 7
上面是滚动条相关的属性。
我们在css中：
有滚动条的容器::滚动条属性{}
就可以在里面设置对应的样式了。
题外话：
less模式下，如何更改定义好的颜色变量的透明度呢？
background: fade(@green, 60%);
fade(颜色变量，透明百分比)
至于上面展示效果的css代码就是：
div::-webkit-scrollbar { width: 4px; } div::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); opacity: 0.2; background: fade(@primary-color, 60%); } div::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: fade(@primary-color, 30%); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
这样就可以啦，快去试试吧。
这里是飞鱼爱吃米，只授渔，不授鱼！