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

首页

前端开发

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

热心网友

转载

2026-04-19

背景

在现代网页开发中，提升用户体验的细节设计至关重要。其中，为可滚动容器添加视觉提示是一种常见且有效的方法。当容器内的内容超出可视区域时，在顶部显示一道阴影条，可以直观地提示用户“上方还有更多内容”。反之，当滚动至顶部时，阴影应自动消失，以保持界面整洁。这种滚动阴影效果不仅美观，更能增强交互的引导性。下图清晰地展示了我们最终要实现的效果：

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

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

实现步骤

首先，我们需要搭建基础的HTML结构和CSS样式，这是实现效果的基石：

1
2
3
…… 16

// 给容器设置最大高度，使其产生滚动
.container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid black;
    position: relative;
}
// 利用sticky定位实现吸顶效果
.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');

// 用到了lodash的防抖函数，
// 通过scrollTop是否大于0来判断容器顶部是否还有滚动空间，
// 从而控制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);

通过以上代码，结合对滚动事件的监听，一个流畅的CSS滚动阴影效果便成功实现了。

扩展应用

掌握了顶部阴影的实现方法，我们自然会联想到如何实现底部、左侧或右侧的滚动阴影。你可能会尝试寻找 scrollBottom、scrollLeft、scrollRight 等属性，但DOM元素并未直接提供这些属性。

解决方案是利用现有的 scrollWidth 和 scrollHeight 属性进行计算：

const scrollRight = scrollWidth - scrollLeft;
const scrollBottom = scrollHeight - scrollTop;
// 然后再使用前文的逻辑处理即可
……
// 但是这里还有个坑，
// 上述的scrollBottom和scrollRight是通过浮点数相减来的，
// 会有精度问题，因此比较时不是直接与0比较，而是用Number.EPSILON
// 举个栗子
scrollRight > Number.EPSILON

由此可见，通过简单的计算和精度处理，我们可以灵活应对各个方向的滚动提示需求。这种“判断滚动空间”的核心思路应用广泛，例如下图所示的滚动进度指示器，其底层逻辑与此一脉相承：

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