怎么用CSS实现长列表滚动时的阴影提示效果-css教程-PHP中文网

滚动容器需设固定max-height和overflow-y: auto，用::before/::after加linear-gradient阴影；JS监听scroll事件可动态控制阴影显隐，但纯CSS方案更稳定。

怎么用css实现长列表滚动时的阴影提示效果

滚动容器必须有明确的 overflow 和高度约束

没有显式 height 或 max-height，且 overflow-y: auto 未生效时，阴影根本不会触发——浏览器压根没产生滚动。常见错误是只写 overflow-y: scroll 却让内容自然撑高，此时滚动条永远不可见，::before/::after 伪元素也就无从谈起。

实操建议：

给容器设固定 height 或 max-height，例如 max-height: 400px
必须声明 overflow-y: auto（不是 scroll，避免 Chrome 下始终显示空滚动条）
确保子元素总高度 > 容器高度，否则不滚动，阴影不出现

用 ::before + ::after 叠加渐变遮罩实现“可感知”的阴影

CSS 本身没有“滚动到顶/底时自动加阴影”的原生机制，只能靠伪元素盖在容器边缘，用 linear-gradient 模拟渐隐效果。关键在于：阴影只是视觉提示，它不随滚动位移，而是固定在容器上下边界。

示例结构（假设容器类名为 .scroll-list）：

.scroll-list {
  position: relative;
  max-height: 300px;
  overflow-y: auto;
}
<p>.scroll-list::before,
.scroll-list::after {
content: '';
position: absolute;
left: 0;
right: 0;
pointer-events: none;
z-index: 1;
}</p><p>.scroll-list::before {
top: 0;
height: 20px;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}</p><p>.scroll-list::after {
bottom: 0;
height: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}</p>

注意：pointer-events: none 是必须的，否则会拦截鼠标滚轮事件；z-index: 1 确保遮罩在内容之上但低于可能的悬浮按钮。

滚动到底部时阴影消失？检查 scrollTop + scrollHeight 计算逻辑

纯 CSS 方案无法动态隐藏顶部/底部阴影——它们始终存在。如果业务需要“只在可滚动时显示、滚到底时收起底部阴影”，就必须用 JavaScript 监听 scroll 事件，通过比较 scrollTop 和 scrollHeight - clientHeight 来 toggle 类名。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

常见误判点：

用 scrollTop === 0 判断顶部，但某些 iOS Safari 会因弹性滚动返回负值，建议用 scrollTop
判断底部时写成 scrollTop === scrollHeight - clientHeight，但浮点误差可能导致不相等，应改用 scrollTop >= scrollHeight - clientHeight - 1
别在每次 scroll 中直接操作 DOM 样式，优先用 classList.toggle() 控制预设 class