背景
在现代网页开发中，提升用户体验的细节设计至关重要。其中，为可滚动容器添加视觉提示是一种常见且有效的方法。当容器内的内容超出可视区域时，在顶部显示一道阴影条，可以直观地提示用户“上方还有更多内容”。反之，当滚动至顶部时，阴影应自动消失，以保持界面整洁。这种滚动阴影效果不仅美观，更能增强交互的引导性。下图清晰地展示了我们最终要实现的效果：
实现步骤
首先，我们需要搭建基础的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
由此可见，通过简单的计算和精度处理，我们可以灵活应对各个方向的滚动提示需求。这种“判断滚动空间”的核心思路应用广泛，例如下图所示的滚动进度指示器，其底层逻辑与此一脉相承：
技术总结
实现一个精致的滚动阴影效果，背后涉及了多个前端开发的关键知识点。这些实用的技巧能显著提升界面的交互体验与专业性。我们来系统回顾一下：
- sticky定位：无需复杂JavaScript计算，即可实现元素在滚动时的吸附效果。
- pointer-events属性：确保视觉阴影层不会阻挡用户对底层内容的点击操作。
- 滚动空间判断：核心在于灵活运用
scrollTop、scrollHeight、scrollWidth等滚动相关属性。 - 防抖（debounce）与立即执行：有效优化高频滚动事件的性能，避免不必要的计算，提升页面流畅度。
- 浮点数精度与EPSILON：处理JavaScript中浮点数计算不精确的经典问题，确保条件判断的严谨性。
深入理解并掌握这些技术点，今后在面对各类动态UI效果和交互优化需求时，你将能够更加得心应手，快速实现高质量的解决方案。
