CSS秘密花園： 滾動提示

《 CSS Secrets 》是 @Lea Verou 最新著作，這本書講解了有關于CSS中一些小秘密。是一本CSSer值得一讀的一本書，經過一段時間的閱讀，我、@南北和@彥子一起將在W3cplus發布一系列相關的讀后感，與大家一起分享。

滾動條主要是用來告訴用戶當前顯示的并不是所有的內容，滾動的話可以查看更多。但是，它們往往顯示得很笨拙而且分散了用戶的注意力，所以現代操作系統中已經開始對它們進行簡化，通常是把它們完全隱藏起來，等到用戶和可滾動的元素元素有實際交互的時候再出現。

雖然現在滾動條很少用來控制滾動了（用戶趨向于用手勢來滑動屏幕），提醒用戶，元素中還有更多的內容沒有全部展示出來，通過一種微妙的方式來傳達信息是很有用的，即使是對那些當前并沒有和用戶進行交互的元素。

這個盒子的內容實際上比當前顯示的更多，它是可滾動的。但是如果你沒有和它進行交互的話，你根本不會發現。

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 的圖像。它們唯一的區別是，當頁面本身滾動的時候，它們還留在原地。有沒有什么辦法可以讓背景圖像隨著元素的內容一起滾動呢？

在幾年前，這個簡單的事情幾乎是不可能的。但是，問題相當明顯， CSS3 給 background-attachment 添加了一個新的關鍵字： local 。

但是， background-attachment: local 并沒有很好地解決我們的情況。如果我們把它應用在我們的陰影漸變上，它給我們完全相反的結果：當我們一路滾動到頂部的時候我們得到了一個陰影，但是當我們向下滾動的時候，陰影消失了。這是只是一個開始，不過——我們要轉換方向了。

新的技巧是使用兩個背景：一個用于生成陰影，一個基本上是白色矩形，用來覆蓋陰影，充當蒙版的角色。陰影背景有默認的 background-attachment （ scroll ），因為我們希望它一直停留在原地。然后，蒙版背景的 background-attachment 為 local ，這樣當我們滾動到頂部的時候它會覆蓋陰影，然后當我們向下滾動的時候，它會隨內容滾動，從而顯示陰影。

我將使用線性漸變來創建蒙版矩形，和元素的背景保持同樣的顏色（在我們的示例中，顏色是 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/css-secrets/scrolling-hints.html