CSS 笔记 01 滚动提示

学习《CSS 解密》

滚动条

滚动条是一种常见的界面控件，
用来提示一个元素除了可以看到的内容之外，
还包含了更多内容。

但是，他往往太过笨重，在视觉上喧宾夺主，
因此现代操作系统已经开始简化它的外观，
当用户不与可滚动的元素交互时，
滚动条就会被完全隐藏。

尽管我们现在已经很少通过滚动条来滚动页面了
(更多的是使用触摸手势)
但滚动条对于元素内容可滚动的提示作用仍然是十分有用的。
哪怕对于那些没有发生交互的元素也是如此。
而且这种提示方式十分巧妙。

优雅的方式

当侧边栏的容器还有更多内容时，
一层淡淡的阴影会出现在容器的顶部 、底部。

<style>
ul {
  overflow: auto;
  width: 10em;
  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: local, scroll;
}
</style>
<ul>
  <li>Ada Catlace</li>
  <li>Alan Purring</li>
  <li>Schrodingcat</li>
  <li>Time 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>