首页 > 网页制作 >使用CSS实现一个滚动阴影效果

使用CSS实现一个滚动阴影效果

来源：互联网 2026-04-08 15:28:35

背景：实现滚动容器的视觉提示在开发过程中，一个常见的需求是在可滚动的容器顶部添加视觉提示，例如阴影条，以提醒用户上方存在更多内容。当容器滚动至顶部时，该提示应自动消失以避免干扰。下图展示了最终希望实现的效果：具体实现步骤首先，搭建基础的HTML结构与CSS样式，为后续效果提供基础。 1 2 3

背景：实现滚动容器的视觉提示

在开发过程中，一个常见的需求是在可滚动的容器顶部添加视觉提示，例如阴影条，以提醒用户上方存在更多内容。当容器滚动至顶部时，该提示应自动消失以避免干扰。下图展示了最终希望实现的效果：

使用CSS实现一个滚动阴影效果

具体实现步骤

首先，搭建基础的HTML结构与CSS样式，为后续效果提供基础。

.container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid black;
    position: relative;
}
.shadow {
    position: sticky;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 10px 0 10px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

核心逻辑在于判断容器顶部是否仍有滚动空间，主要通过scrollTop属性实现。若其值大于0，则表示上方存在隐藏内容，此时应显示阴影。

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');

const handler = debounce((e) => {
    if (e.target.scrollTop > 0) {
        shadow.style.visibility = 'visible';
    } else {
        shadow.style.visibility = 'hidden'
    }
}, 50, { leading: true });

container.addEventListener('scroll', handler);

通过监听滚动事件并应用上述逻辑，即可稳定实现前文图示的滚动阴影效果。

扩展应用：其他方向的阴影与滚动指示

掌握了顶部阴影的实现后，可将其原理延伸至底部、左侧或右侧。需注意，DOM元素原生不提供scrollBottom或scrollRight属性，但可通过scrollWidth与scrollHeight计算得出：

const scrollRight = scrollWidth - scrollLeft;
const scrollBottom = scrollHeight - scrollTop;
// 注意浮点数精度问题，比较时建议使用Number.EPSILON
scrollRight > Number.EPSILON

类似的判断逻辑还可应用于更广泛的场景，例如创建滚动指示器。下图展示了基于同一原理实现的滚动指示效果：

使用CSS实现一个滚动阴影效果