第 259 期 《利用 CSS 渐变实现更优雅的滚动提醒》 by 花间

[CuriosityLxn]

起因

现代网页中，一般会将不符合当代用户审美的 scroll-bar 隐藏。

如果可滚动视区从内容的可视部分和超出部分的间隙分割，尤其这种情况出现在导航条中，用户不能明确的感知到该区域是可滚动的。我遇到的情况如下图，在未进行滑动操作时，是不是看起来导航条的类目只有这几个：

其实还有好几个类目被隐藏哦，惊不惊喜（把设计不足强行惊喜😂）

那么，

问题来了

滚动条被隐藏时，如何更优雅的向用户提供滚动提醒。

最好能通过一个小小的视觉效果实现滚动提醒。

灵感来源

Goole 阅读器的滚动区域有这样的效果：

• 左图：只有下方内容超出，内容上方与滚动区域上方重合
• 中间的图：上下均有内容超出
• 右图：只有上方内容超出，内容下方与滚动区域下方重合

阅读器的上下阴影看起来挺像和一个渐变圆形相切形成的，不由想到是不是可以用 CSS 的径向渐变 radial-gradient 实现这一效果。

这篇文章正是如此实现了滚动区上方的阴影，并进行了一些视觉优化。很容易的类比出下方阴影，以及我们想要的左右滚动提示效果。

上下|左右 滚动提示实现 in codePen

运用到项目中后，发现由于导航条高度太小，渐变消失的有些突然，不是很好看。于是又想用两个 linear-gradient 替代 radial-gradient 实现阴影（也在上面的 codePen 中），两种方案效果差不多，目前还在优化，期望是能画出类似 box-shadow 的效果。

在写这篇文章的时候发现 GitHub 就是使用 box-shadow + 反差色 的方式进行滚动提醒的😂，观察太不仔细了。用阴影来做滚动提醒要比 0.5 px 的 border 效果自然，可以反馈给设计。