纯CSS实现水平滚动列表两端渐变遮罩，本质是用position: relative容器内叠加pointer-events: none的伪元素，通过linear-gradient(to right/to left)覆盖左右边缘，不干扰滚动与可访问性。
水平滚动列表两端加渐变遮罩的原理
纯 CSS 实现“可滚动但两端有渐变遮罩”的效果，本质是用 linear-gradient 覆盖在容器两侧，把超出部分视觉上“柔化隐藏”，而不是靠裁剪或 JS 动态计算。它不改变滚动行为，只影响观感——滚动条依然存在，内容依然完整可访问。
关键点在于：遮罩层必须是独立于滚动内容的伪元素（::before/::after），且定位在容器内部、z-index 高于内容，同时不能干扰鼠标事件（pointer-events: none）。
遮罩层必须用绝对定位 + 容器相对定位
如果直接给 .scroll-container 加 background: linear-gradient(...)，会覆盖整个背景，无法只遮住左右边缘；而用伪元素时，容器本身必须设 position: relative，否则伪元素会相对于 body 定位，跑偏。
常见错误现象：::before 跑到页面顶部、遮罩宽度不对、移动端失效
立即学习“前端免费学习笔记（深入）”；
-
.scroll-container必须声明position: relative - 伪元素用
position: absolute，配合top: 0; height: 100%覆盖全高 - 左遮罩：
left: 0; width: 40px;；右遮罩：right: 0; width: 40px; - 务必加
pointer-events: none，否则会拦截滚动手势
渐变写法要兼容滚动方向与设备像素比
横向滚动下，遮罩方向必须是 to right（左遮罩）和 to left（右遮罩），不能写成 90deg —— 后者在 Safari 或高 DPR 屏幕上容易出现色带或渲染断裂。
示例左遮罩 CSS：
.scroll-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40px;
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
z-index: 2;
pointer-events: none;
}
注意：rgba(255,255,255,0) 不能简写为 transparent，某些旧版 Safari 对 transparent 在渐变中解析不稳定。
响应式遮罩宽度要随容器变化而非固定像素
固定 width: 40px 在小屏上太宽、大屏上又不够，容易露出硬边。更稳妥的做法是用 min(40px, 10%) 或媒体查询分段控制：
- 桌面端：
width: 60px - 平板（768px–1024px）：
width: 40px - 手机（width: 24px，并确保
padding-inline留出空间防误触
遮罩本身不解决“用户是否知道可滚动”这个问题——它只是视觉提示。真正提升可发现性，还得靠初始偏移、箭头按钮或 scroll-snap-align 配合微动效，这些都得单独处理。
