CSS秘密花园: 滚动提示

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

CSS Secrets

滚动条主要是用来告诉用户当前显示的并不是所有的内容,滚动的话可以查看更多。但是,它们往往显示得很笨拙而且分散了用户的注意力,所以现代操作系统中已经开始对它们进行简化,通常是把它们完全隐藏起来,等到用户和可滚动的元素元素有实际交互的时候再出现。

虽然现在滚动条很少用来控制滚动了(用户趋向于用手势来滑动屏幕),提醒用户,元素中还有更多的内容没有全部展示出来,通过一种微妙的方式来传达信息是很有用的,即使是对那些当前并没有和用户进行交互的元素。

滚动提示

这个盒子的内容实际上比当前显示的更多,它是可滚动的。但是如果你没有和它进行交互的话,你根本不会发现。

Google Reader的UX设计师,谷歌开发的一个阅读器(目前已停产),找到了一个非常优雅的方法来提示这一点:当有更多内容的时候,侧边栏的顶部或底部会显示一个细微的阴影。

滚动提示

  • 左图:向上滚动
  • 中间的图:可上下滚动
  • 右图:向下滚动

但是,Google Reader中为了完成这个效果,使用了相当多的脚本。这是真的需要的吗,或许我们可以用CSS来完成相同的效果呢?

解决方案

首先,我们从一些简单的HTML标签开始,一个普通的无序列表和一些占位内容(奇奇怪怪的名字orz):

<ul>
    <li>Ada Catlace</li>
    <li>Alan Purring</li>
    <li>Schrödingcat</li>
    <li>Tim Purrners-Lee</li>
    <li>WebKitty</li>
    <li>Json</li>
    <li>Void</li>
    <li>Neko</li>
    <li>NaN</li>
    <li>Cat5</li>
    <li>Vector</li>
</ul>

然后,我们可以为<ul>应用一些基本的样式,让容器小于内容,这样它就可滚动了:

overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;

现在事情开始变得有趣了。我们在顶部应用一个阴影,通过一个径向渐变:

background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%)
            no-repeat;
background-size: 100% 15px;

你可以在下图中看到结果。

滚动提示

目前它停在我们刚开始滚动的地方。这是默认情况下我们的背景图片显示的结果:它们的位置是相对于元素固定的,不考虑元素滚动了多少。这也适用于带有background-attachment: fixed的图像。它们唯一的区别是,当页面本身滚动的时候,它们还留在原地。有没有什么办法可以让背景图像随着元素的内容一起滚动呢?

在几年前,这个简单的事情几乎是不可能的。但是,问题相当明显,CSS3background-attachment添加了一个新的关键字:local

但是,background-attachment: local并没有很好地解决我们的情况。如果我们把它应用在我们的阴影渐变上,它给我们完全相反的结果:当我们一路滚动到顶部的时候我们得到了一个阴影,但是当我们向下滚动的时候,阴影消失了。这是只是一个开始,不过——我们要转换方向了。

新的技巧是使用两个背景:一个用于生成阴影,一个基本上是白色矩形,用来覆盖阴影,充当蒙版的角色。阴影背景有默认的background-attachmentscroll),因为我们希望它一直停留在原地。然后,蒙版背景的background-attachmentlocal,这样当我们滚动到顶部的时候它会覆盖阴影,然后当我们向下滚动的时候,它会随内容滚动,从而显示阴影。

我将使用线性渐变来创建蒙版矩形,和元素的背景保持同样的颜色(在我们的示例中,颜色是white):

background: linear-gradient(white, white),
            radial-gradient(at top, rgba(0,0,0,.2),transparent 70%);
background-repeat: no-repeat;
background-size: 100% 15px;
background-attachment: local, scroll;

你可以在下图中看到它在滚动的不同阶段的效果。

滚动提示

你可能注意到它似乎是产生了我们预期的效果,但是有一个很明显的缺点:当我们只是轻轻滚动的时候,阴影显示的方式非常地不连贯和别扭。有什么办法可以让它平滑一些吗?

  • 左图:滚动到顶部
  • 中间的图:轻轻地向下滚动
  • 右图:快速向下滚动

我们可以利用我们的“蒙版”背景其实是一个线性渐变这个事实,把它转换成一个white到白色透明的white(hsla(0,0%,100%,0)rgba(255,255,255,0))的线性渐变,这样我们的阴影就可以非常平滑地显示了:

background: linear-gradient(white, hsla(0,0%,100%,0)),
            radial-gradient(at top, rgba(0,0,0,.2),transparent 70%);

为什么是白色渐变而不是直接一个transparent呢?后者实际上是rgba(0,0,0,0)的别名,这样如果它是从不透明白色到透明黑色的过渡的话,渐变可能包含灰色阴影。如果浏览器是通过premultiplied RGBA space插入颜色,这应该不会发生。不同的插值算法是这本书范围之外的内容,但是在网上有大量的资料可以查看。

这是朝着正确方向迈出的一步~~如图所示,

滚动提示

它的阴影确实是逐渐显示的,和我们的期望相符。但是,它目前有一个非常严重的缺陷:当我们滚动到顶部的时候,它就不能像之前那样把阴影覆盖掉了。我们可以通过把white色标下移一些(15px是精确值,和我们阴影的高度值一致)来解决这个事情,这样在开始褪色之前我们就可以得到一块纯白色的区域,正好将阴影完全覆盖。此外,我们需要增加蒙版背景的大小,让它比阴影大,否则我们就得不到渐变。确切的高度取决于我们希望效果的平滑度是多少(比如说,当我们滚动的时候,阴影显示的快慢?)经过试验,50px是一个合理值。最后的代码如下所示:

background: linear-gradient(white 30%, transparent),
            radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;

效果如下:

滚动提示

当然,为了实现原始效果,我们需要再加两个渐变用于底部阴影和它的蒙版,但是逻辑基本上是一样的,所以就留给读者做练习吧(可以在下面的示例中查看解决方案)。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/scrolling-hints.htmlNike Paul George PG3

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-secrets/scrolling-hints.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部