主要參考 CSS SECRETS 這本書裡面的內容作筆記~

可滾動的提示

我自己是個很遲鈍的使用者 =艸=
不知道大家有沒有類似的經驗，還記得之前我一直找不到在 google 搜尋時，設定搜尋條件的地方。

頁面是長這樣的：

結果在某次 F2E 的討論中，才知道原來上面的那條 bar 是可以左右滑動的...

往左滑後，就能看到 "搜尋工具" 的選項了 =口=

因此為了預防我這種使用者，在頁面上放一個可滾動的區塊時，增加一些提示絕對是很明智的選擇。
現在 gmail 的側欄就有一個不錯的效果：

1. 可以向下滑時，下方顯示陰影
2. 可以向上滑時，上方顯示陰影

從左到右分別是 不可滑動 / 可以向下滑動 / 可以向上及向下滑動 的狀況

這邊寫了一個可以上下滾動的 ul：https://jsfiddle.net/lazy_shyu/7t0fdrqx/1/

先加上上方的陰影樣式：https://jsfiddle.net/lazy_shyu/7t0fdrqx/2/

ul {
	/* 
     * 一些本來的設定
     */

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

但我們希望它只在最上方顯示 ( 會隨著滾動一起往上 )，所以我們可以新增設定

ul {
	/* 
     * 一些本來的設定
     */

    background-attachment: local;
}

可以做到這個效果後，就很方便了~!!
我們可以設定多個背景，其中陰影設為 scroll、在設定一個白色的 local 區塊 ( 用來擋住陰影的 )，這樣就能做到 "滑到頂時沒有陰影" 的效果了。

https://jsfiddle.net/lazy_shyu/7t0fdrqx/3/

最後下方的陰影也比照辦理就可以了~
https://jsfiddle.net/lazy_shyu/7t0fdrqx/4/

以上是理想狀況，在 firefox 跟 safari 瀏覽的狀況也符合預期，
但討厭的是，chrome 上面的效果並不好 ( background 的疊加效果不如預期 Orz )
我還沒查到原因，之後如果找到相關的討論的話會再補上。

最後用 ::before 跟 ::after 做了一個替代方案：
https://jsfiddle.net/7t0fdrqx/6/