CSS秘密花园： 滚动提示

   <p>《 <a href="/misc/goto?guid=4958976660757929944" rel="nofollow,noindex">CSS Secrets</a> 》是 <a href="/misc/goto?guid=4958976660849001117" rel="nofollow,noindex">@Lea Verou</a> 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。</p>    <p><img src="https://simg.open-open.com/show/b873adc9c0b700ab68ae0efe9cf398be.jpg"></p>    <p>滚动条主要是用来告诉用户当前显示的并不是所有的内容，滚动的话可以查看更多。但是，它们往往显示得很笨拙而且分散了用户的注意力，所以现代操作系统中已经开始对它们进行简化，通常是把它们完全隐藏起来，等到用户和可滚动的元素元素有实际交互的时候再出现。</p>    <p>虽然现在滚动条很少用来控制滚动了（用户趋向于用手势来滑动屏幕），提醒用户，元素中还有更多的内容没有全部展示出来，通过一种微妙的方式来传达信息是很有用的，即使是对那些当前并没有和用户进行交互的元素。</p>    <p><img src="https://simg.open-open.com/show/a528910df641b844896cb03d0ec453b7.png"></p>    <p>这个盒子的内容实际上比当前显示的更多，它是可滚动的。但是如果你没有和它进行交互的话，你根本不会发现。</p>    <p>Google Reader的UX设计师，谷歌开发的一个阅读器（目前已停产），找到了一个非常优雅的方法来提示这一点：当有更多内容的时候，侧边栏的顶部或底部会显示一个细微的阴影。</p>    <p><img src="https://simg.open-open.com/show/073ef58c3b7b5babb227b44249ec358a.png"></p>    <ul>     <li>左图：向上滚动</li>     <li>中间的图：可上下滚动</li>     <li>右图：向下滚动</li>    </ul>    <p>但是，Google Reader中为了完成这个效果，使用了相当多的脚本。这是真的需要的吗，或许我们可以用CSS来完成相同的效果呢？</p>    <h2>解决方案</h2>    <p>首先，我们从一些简单的HTML标签开始，一个普通的无序列表和一些占位内容（奇奇怪怪的名字orz）：</p>    <pre>  <code class="language-html"><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>  </code></pre>    <p>然后，我们可以为 <ul> 应用一些基本的样式，让容器小于内容，这样它就可滚动了：</p>    <pre>  <code class="language-css">overflow: auto;  width: 10em;  height: 8em;  padding: .3em .5em;  border: 1px solid silver;  </code></pre>    <p>现在事情开始变得有趣了。我们在顶部应用一个阴影，通过一个径向渐变：</p>    <pre>  <code class="language-css">background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%)              no-repeat;  background-size: 100% 15px;  </code></pre>    <p>你可以在下图中看到结果。</p>    <p><img src="https://simg.open-open.com/show/546f914fe1a7a6bdbf21eaf780c7871c.png"></p>    <p>目前它停在我们刚开始滚动的地方。这是默认情况下我们的背景图片显示的结果：它们的位置是相对于元素固定的，不考虑元素滚动了多少。这也适用于带有 background-attachment: fixed 的图像。它们唯一的区别是，当页面本身滚动的时候，它们还留在原地。有没有什么办法可以让背景图像随着元素的内容一起滚动呢？</p>    <p>在几年前，这个简单的事情几乎是不可能的。但是，问题相当明显， <a href="/misc/goto?guid=4959670148310585712" rel="nofollow,noindex">CSS3</a> 给 background-attachment 添加了一个新的关键字： local 。</p>    <p>但是， background-attachment: local 并没有很好地解决我们的情况。如果我们把它应用在我们的阴影渐变上，它给我们完全相反的结果：当我们一路滚动到顶部的时候我们得到了一个阴影，但是当我们向下滚动的时候，阴影消失了。这是只是一个开始，不过——我们要转换方向了。</p>    <p>新的技巧是使用两个背景：一个用于生成阴影，一个基本上是白色矩形，用来覆盖阴影，充当蒙版的角色。阴影背景有默认的 background-attachment （ scroll ），因为我们希望它一直停留在原地。然后，蒙版背景的 background-attachment 为 local ，这样当我们滚动到顶部的时候它会覆盖阴影，然后当我们向下滚动的时候，它会随内容滚动，从而显示阴影。</p>    <p>我将使用线性渐变来创建蒙版矩形，和元素的背景保持同样的颜色（在我们的示例中，颜色是 white ）：</p>    <pre>  <code class="language-css">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;  </code></pre>    <p>你可以在下图中看到它在滚动的不同阶段的效果。</p>    <p><img src="https://simg.open-open.com/show/7bc65df0627b6fe3ffb94cb1ed3e4342.png"></p>    <p>你可能注意到它似乎是产生了我们预期的效果，但是有一个很明显的缺点：当我们只是轻轻滚动的时候，阴影显示的方式非常地不连贯和别扭。有什么办法可以让它平滑一些吗？</p>    <ul>     <li>左图：滚动到顶部</li>     <li>中间的图：轻轻地向下滚动</li>     <li>右图：快速向下滚动</li>    </ul>    <p>我们可以利用我们的“蒙版”背景其实是一个线性渐变这个事实，把它转换成一个 white 到白色透明的 white ( hsla(0,0%,100%,0) 或 rgba(255,255,255,0) )的线性渐变，这样我们的阴影就可以非常平滑地显示了：</p>    <pre>  <code class="language-css">background: linear-gradient(white, hsla(0,0%,100%,0)),              radial-gradient(at top, rgba(0,0,0,.2),transparent 70%);  </code></pre>    <p>为什么是白色渐变而不是直接一个 transparent 呢？后者实际上是 rgba(0,0,0,0) 的别名，这样如果它是从不透明白色到透明黑色的过渡的话，渐变可能包含灰色阴影。如果浏览器是通过premultiplied RGBA space插入颜色，这应该不会发生。不同的插值算法是这本书范围之外的内容，但是在网上有大量的资料可以查看。</p>    <p>这是朝着正确方向迈出的一步~~如图所示，</p>    <p><img src="https://simg.open-open.com/show/f7d2cfe300e95e3db3bfedb310565bdb.png"></p>    <p>它的阴影确实是逐渐显示的，和我们的期望相符。但是，它目前有一个非常严重的缺陷：当我们滚动到顶部的时候，它就不能像之前那样把阴影覆盖掉了。我们可以通过把 white 色标下移一些（ 15px 是精确值，和我们阴影的高度值一致）来解决这个事情，这样在开始褪色之前我们就可以得到一块纯白色的区域，正好将阴影完全覆盖。此外，我们需要增加蒙版背景的大小，让它比阴影大，否则我们就得不到渐变。确切的高度取决于我们希望效果的平滑度是多少（比如说，当我们滚动的时候，阴影显示的快慢？）经过试验， 50px 是一个合理值。最后的代码如下所示：</p>    <pre>  <code class="language-css">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;  </code></pre>    <p>效果如下：</p>    <p><img src="https://simg.open-open.com/show/74f7e23fa1d3bfef8cdc2e155ecfb6a4.png"></p>    <p>当然，为了实现原始效果，我们需要再加两个渐变用于底部阴影和它的蒙版，但是逻辑基本上是一样的，所以就留给读者做练习吧（可以在下面的示例中查看解决方案）。</p>    <p>来自： <a href="/misc/goto?guid=4959670148392196989" rel="nofollow">http://www.w3cplus.com/css3/css-secrets/scrolling-hints.html</a></p>