使用純 CSS 實現(xiàn)滾動陰影效果

發(fā)布時間：2021-01-04 16:42:53 作者：ChokCoco

我要評論

這篇文章主要介紹了使用純 CSS 實現(xiàn)滾動陰影效果,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

開門見山，有這樣一種非常常見的情況，對于一些可滾動的元素而言。通常在滾動的時候會給垂直于滾動的一側(cè)添加一個陰影，用于表明當前有元素被滾動給該滾出了可視區(qū)域，類似這樣：

可以看到，在滾動的過程中，會出現(xiàn)一條陰影：

對于兩側(cè)的列在滾動的過程中，靜止不動，吸附在邊界的問題，通常 CSS 使用position: sticky即可解決。

但是對于滾動過程中才出現(xiàn)的陰影（滾動容器內(nèi)的內(nèi)容沒有貼邊，則陰影出現(xiàn)，貼邊，則陰影消失），之前的做法一直都是需要借助 JS 完成的。

那么，有沒有純 CSS 能夠?qū)崿F(xiàn)的方案呢？嘿嘿嘿，有。有一種非常討巧的障眼法，下面就讓我們來一步一步揭開它的面紗。

神奇的background-attachment

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

在較早的一篇文章里 --CSS 實現(xiàn)視差效果，詳細了介紹了background-attachment，借助了background-attachment: fixed可以簡單的實現(xiàn)網(wǎng)站的滾動視差或者是類似圖片點擊的水紋效果，類似這樣：

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

background-attachment: srcoll

首先，介紹一下background-attachment，如果指定了background-image，那么background-attachment決定背景是在視口中固定的還是隨著包含它的區(qū)塊滾動的。

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

background-attachment: local，這個就是和我們?nèi)粘Ｊ褂弥械挠梅ㄊ且恢碌?，可滾動容器的背景圖案隨著容器進行滾動：

background-attachment: scroll，這個是今天的主角，它表明背景相對于元素本身固定，而不是隨著它的內(nèi)容滾動：

如果你還沒弄明白他們的區(qū)別，可以戳下面的 DEMO 自己感受一下：

CodePen Demo -- bg-attachment Demo

srcoll與local同時使用，實現(xiàn)障眼法

到這里，可能很多同學還是懵的，我們到底要做什么呢？這個和本文的滾動陰影有什么關(guān)聯(lián)呢？

別急，滾動陰影的難點在于，初始沒有滾動的時候是沒有陰影展現(xiàn)的，只有當開始滾動，陰影才會出現(xiàn)。

所以這里，我們借助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，可以看大，當滾動的時候，最后一幅疊加的情況，其實就是我們需要的滾動的時候展示不同的顏色（陰影）的效果。我們調(diào)整一下兩個漸變的顏色，遮罩層（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%)線性漸變模擬了一層灰色陰影：