使用CSS實(shí)現(xiàn)一個(gè)滾動(dòng)陰影效果

發(fā)布時(shí)間：2023-12-12 10:52:07 作者：超級(jí)無(wú)敵大怪獸

為了良好的用戶(hù)體驗(yàn)，需要在容器頂部可滾動(dòng)的情況下增加一個(gè)陰影條，提示用戶(hù)可向上滾動(dòng)，本文主要為大家詳細(xì)介紹了如何使用CSS實(shí)現(xiàn)簡(jiǎn)單的滾動(dòng)陰影效果，有需要的小伙伴可以了解下

背景

為了良好的用戶(hù)體驗(yàn)，需要在容器頂部可滾動(dòng)的情況下增加一個(gè)陰影條，提示用戶(hù)可向上滾動(dòng)；如果容器頂部不可滾動(dòng)，則不顯示陰影條，效果如下圖所示：

實(shí)現(xiàn)

首先我們定義好dom和相應(yīng)的樣式：

<!-- 容器 -->
<div class="container">
  	<!-- 陰影 -->
    <div class="shadow"></div>
  	<!-- 占位用，使容器能夠滾動(dòng) -->
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
    11<br/>
    12<br/>
    13<br/>
    14<br/>
    15<br/>
    16<br/>
</div>

// 給容器設(shè)置最大高度，使其產(chǎn)生滾動(dòng)
.container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid black;
    position: relative;
}
// 利用sticky定位實(shí)現(xiàn)吸頂效果
.shadow {
    position: sticky;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 10px 0 10px rgba(0, 0, 0, 0.2);
  	// 如果不希望陰影擋住下方內(nèi)容的點(diǎn)擊事件的話(huà)
    pointer-events: none;
}

核心的實(shí)現(xiàn)便是如何判斷容器頂部是否還有滾動(dòng)空間，我們用到scrollTop屬性，如果scrollTop大于0，說(shuō)明可以向上滾動(dòng)：

import { debounce } from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js';
// 容器
const container = document.querySelector('.container');
// 陰影
const shadow = document.querySelector('.shadow');
// 用到了lodash的防抖函數(shù)，
// 通過(guò)scrollTop是否大于0來(lái)判斷容器頂部是否還有滾動(dòng)空間，
// 從而控制shadow是否顯示。
const handler = debounce((e) => {
    if (e.target.scrollTop > 0) {
        shadow.style.visibility = 'visible';
    } else {
        shadow.style.visibility = 'hidden'
    }
}, 50, { leading: true });
// 監(jiān)聽(tīng)滾動(dòng)事件
container.addEventListener('scroll', handler);

然后就實(shí)現(xiàn)了開(kāi)頭的滾動(dòng)陰影效果。

舉一反三

會(huì)了頂部陰影，那怎么實(shí)現(xiàn)底部、左側(cè)、右側(cè)陰影呢？聰明的你肯定脫口而出用scrollBottom、scrollLeft、scrollRight比較一下就行了。行嗎？不太行哦，元素沒(méi)有scrollBottom、

scrollRight屬性，因此底部和右側(cè)陰影不能用這個(gè)方法實(shí)現(xiàn)。那么應(yīng)該怎么搞呢，也簡(jiǎn)單，用到元素的scrollWidth和scrollHeight就可以實(shí)現(xiàn)scrollBottom和scrollRight的效果：

const scrollRight = scrollWidth - scrollLeft;
const scrollBottom = scrollHeight - scrollTop;
// 然后再使用前文的邏輯處理即可
......
// 但是這里還有個(gè)坑，
// 上述的scrollBottom和scrollRight是通過(guò)浮點(diǎn)數(shù)相減來(lái)的，
// 會(huì)有精度問(wèn)題，因此比較時(shí)不是直接與0比較，而是用Number.EPSILON
// 舉個(gè)栗子
scrollRight > Number.EPSILON

其實(shí)不止?jié)L動(dòng)陰影，還有一些效果也是可以用這個(gè)思路做的，比如下圖中的指示器效果：