Page 191 - css揭秘

此现代操作系统已经开始简化它的外观，当用户不与可滚动的元素交互时，
滚动条就会被完全隐藏。
尽管我们现在已经很少通过滚动条来滚动页面了（更多的是使用触摸手
势），但滚动条对于元素内容可滚动的提示作用仍然是十分有用的，哪怕对
于那些没有发生交互的元素也是如此；而且这种提示方式十分巧妙。
Google Reader 是一款由 Google 推出的 RSS 阅读器（现已下线），它的
用户体验设计师找到了一种非常优雅的方式来作出类似的提示：当侧边栏的
容器还有更多内容时，一层淡淡的阴影会出现在容器的顶部和 / 或底部（参
见图 6-20）。

图 6-20
Google Reader 提出了一种优雅
的用户体验模式，它可以提示侧
边栏需要滚动才能看到完整的内
容。左图：滚动到最顶部时；中
图：滚动到列表的中间位置时；
右图：滚动到最底部时

不过 Google Reader 为了实现这个效果用到了大量的脚本。这真的有必
要吗？我们能否用纯 CSS 实现相同的效果？

解决方案

让我们首先从一段简单的结构代码开始，一个带有示意性内容（都是一
些极客范的猫名）的普通无序列表：

<ul> HTML
<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>

160 第 6 章 用户体验

඀ࠡ JOEC