学会使用 CSS 自定义滚动条，能让你做的产品更有用户体验

现在我们知道了新旧语法的工作原理，接着，我们开始定制一些滚动条设计。

自定义滚动条设计

例1

在研究定制滚动条之前，值得讨论一下Mac OS中的默认样式。下面是它的外观。

• 滚动条track 的左右两边都有边框，背景色为纯色。

• 滚动条thumb是圆形的，左右两边都有空间。

对于Windows，它有点不同。

下面是我们根据上面的模拟图来定制滚动条。

.section::-webkit-scrollbar {

width: 16px;

}

.section::-webkit-scrollbar-track {

background-color: #e4e4e4;

border-radius: 100px;

}

.section::-webkit-scrollbar-thumb {

background-color: #d4aa70;

border-radius: 100px;

}

为 track 和thumb添加