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

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

自定义滚动条现在越来越流行，很值得研究一翻。为什么需要自定义滚动？浏览器的默认的滚动条让UI在多个操作系统中看起来不一致，使用定义滚动我们可以统一风格。

我一直对如何在CSS中定制滚动条很感兴趣，但一直没有机会这样做。今天，我就记录一下自己的学习过程。

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

滚动条track 的左右两边都有边框，背景色为纯色。滚动条thumb是圆形的，左右两边都有空间。

对于Windows，它有点不同。

.section::-webkit-scrollbar-thumb?{????background-image:?linear-gradient(180deg,?#D0368A?0%,?#708AD4?99%);????box-shadow:?inset?2px?2px?5px?0?rgba(#fff,?0.5);????border-radius:?100px;}

示例地址：https://codepen.io/shadeed/pen/VwpOReG

例3

我们还可以为 thumb 和track添加边框，这可以帮助我们处理一些棘手的设计。

.section::-webkit-scrollbar-thumb?{????border-radius:?100px;????background:?#8070D4;????border:?6px?solid?rgba(0,0,0,0.2);}

基于同样的例子，我们可以重置顶部和底部边界为零，这样thumb获得一个有趣的效果。注意thumb顶部和底部的那些小元素。

示例地址：https://codepen.io/shadeed/pen/qBrGvOx

可以添加悬停效果吗？

我们可以为新旧语法的滚动条thumb添加悬停效果。

/*?旧语法?*/.section::-webkit-scrollbar-thumb:hover?{????background-color:?#5749d2;}/*?新语法?*/.section?{????scrollbar-color:?#d4aa70?#e4e4e4;????transition:?scrollbar-color?0.3s?ease-out;}.section:hover?{????scrollbar-color:?#5749d2;}需要时显示滚动条

创建一个可滚动的元素是可以通过给overflow属性添加一个除visible以外的值。建议使用auto关键字，因为它只在内容超过其容器时才会显示滚动条。

.section?{????overflow-y:?auto;}可访问性问题

在定制滚动条设计时，请记住在 thumb 和 track之间要有良好的对比，这样它就容易被用户注意。

考虑一下下面这个自定义滚动条的 “坏 “例子。

thumb 的颜色几乎看不出来。这对用户来说不是好事，因为如果他们习惯于通过thumb 滚动，这将增加他们的难度。

作者：ishadeed 译者：前端小智 来源：ishadeed

原文：https://ishadeed.com/article/custom-scrollbars-css/