使用純 CSS 實現滾動陰影效果

開門見山，有這樣一種很是常見的狀況，對於一些可滾動的元素而言。一般在滾動的時候會給垂直於滾動的一側添加一個陰影，用於代表當前有元素被滾動給該滾出了可視區域，相似這樣：

能夠看到，在滾動的過程當中，會出現一條陰影：

對於兩側的列在滾動的過程當中，靜止不動，吸附在邊界的問題，一般 CSS 使用 position: sticky 便可解決。

可是對於滾動過程當中纔出現的陰影（滾動容器內的內容沒有貼邊，則陰影出現，貼邊，則陰影消失），以前的作法一直都是須要藉助 JS 完成的。

那麼，有沒有純 CSS 可以實現的方案呢？嘿嘿嘿，有。有一種很是討巧的障眼法，下面就讓咱們來一步一步揭開它的面紗。

 

神奇的 background-attachment

要使用純 CSS 實現上述滾動陰影，最核心的要使用到的元素就是 background-attachment。

在較早的一篇文章裏 -- CSS 實現視差效果，詳細了介紹了 background-attachment，藉助了 background-attachment: fixed 能夠簡單的實現網站的滾動視差或者是相似圖片點擊的水紋效果，相似這樣：

固然，今天咱們的主角不是 background-attachment: fixed，而是 background-attachment: srcoll。

 

background-attachment: srcoll

首先，介紹一下 background-attachment，若是指定了 background-image ，那麼 background-attachment 決定背景是在視口中固定的仍是隨着包含它的區塊滾動的。

簡單而言，就是決定了在可滾動的容器中，背景圖案是如何進行運動的。經過兩個簡單的 Demo，弄懂 background-attachment: srcoll 和 background-attachment: local。

background-attachment: local，這個就是和咱們平常使用中的用法是一致的，可滾動容器的背景圖案隨着容器進行滾動：

background-attachment: scroll，這個是今天的主角，它代表背景相對於元素自己固定， 而不是隨着它的內容滾動：

若是你還沒弄明白他們的區別，能夠戳下面的 DEMO 本身感覺一下：

CodePen Demo -- bg-attachment Demo

 

srcoll 與 local 同時使用，實現障眼法

到這裏，可能不少同窗仍是懵的，咱們到底要作什麼呢？這個和本文的滾動陰影有什麼關聯呢？

別急，滾動陰影的難點在於，初始沒有滾動的時候是沒有陰影展示的，只有當開始滾動，陰影纔會出現。

因此這裏，咱們藉助 background-attachment: srcoll 和 background-attachment: local 兩個屬性，在滾動初始的時候，利用兩層背景疊加在一塊兒隱藏陰影背景，真正滾動的時候，將疊加的部分移走，只漏出陰影部分便可。

嗯？什麼意思。咱們用給滾動容器，加上兩個漸變效果，分別運用上 background-attachment: srcoll 和 background-attachment: local，再疊加起來，像是這樣：

<!-- 可滾動容器 -->
<ul> 
    <li>...</li>
    ...
    <li>...</li>
</ul> 

// 情形一：
.g-one {
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}

// 情形二：
.g-two {
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

// 情形三：
.g-combine {
    background: 
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

實際效果就是這樣，一個背景是隨容器滾動，一個背景是隨容器固定。隨容器滾動的背景充當初始的遮罩層：

OK，能夠看大，當滾動的時候，最後一幅疊加的狀況，其實就是咱們須要的滾動的時候展現不一樣的顏色（陰影）的效果。咱們調整一下兩個漸變的顏色，遮罩層（background-attachment: local）爲白色，再把固定不動的陰影層（background-attachment: scroll），利用徑向漸變模擬爲咱們想要的陰影顏色。

CSS 代碼大概是這樣：

.g-final {
    background: 
        linear-gradient(#fff, transparent 100%),
        linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
    background-size: 100% 30px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

利用 linear-gradient(rgba(0, 0, 0, .5), transparent 100%) 線性漸變模擬了一層灰色陰影：

OK，大功告成。上述全部 DEMO，能夠戳這裏看看：

CodePen Demo -- Pure CSS Scroll shadow

如文章開頭所示，這技巧也是能夠直接運用在 table 裏面：

CodePen Demo -- Pure CSS Table scroll shadow

 

一些問題

層疊順序

固然，在上述的過程當中，其實一直有個問題，就是因爲是使用背景 background 模擬的陰影，其實最終的效果，內容是在陰影（背景之上的），可是實際效果其實沒有很大的差異，若是能忍受這一點，這個方案是徹底可用的。

 

兼容性

嗯，固然還有一個問題是就是 background-attachment 的兼容問題。讓咱們看看 CAN I USE：

Can i use 下面的註釋代表，大部分兼容問題實際上是出在 background-attachment: fixed，對於本文的效果影響不大。

 

最後

本文技巧非原創，第一次看到來自這篇文章：探索CSS屬性*-gradient的實用價值 ，對其可否在實際中運用再作了一些探究。

好了，本文到此結束。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。