水平滚动容器里的固定遮罩层写法

横向滚动的卡片列表右侧常加一层渐变遮罩，提示后面还有内容。常见做法是把遮罩放进滚动容器内部并绝对定位，滚动时遮罩跟着一起走。问题出在定位基准。

失败点一：遮罩进入滚动坐标系

position: absolute 的元素以最近的定位祖先为基准。容器本身设为 position: relative 又带 overflow-x: auto 时，绝对定位的子元素处在滚动内容坐标系里，随滚动条位移。

失败点二：遮罩直接挂在容器上

给滚动容器加渐变背景，背景层同样处于滚动坐标系，滚动时一并移动，遮罩失去提示作用。

可行结构：外层承担定位

在滚动容器外面包一层，由外层提供定位上下文，遮罩相对外层固定，滚动只发生在内层。

<div class='rail-wrap'>
  <div class='rail'>
    <div class='card'>卡片一</div>
    <div class='card'>卡片二</div>
  </div>
  <div class='rail-fade' aria-hidden='true'></div>
</div>

.rail-wrap { position: relative; }
.rail { display: flex; gap: 12px; overflow-x: auto; }
.rail-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), #ffffff);
}

pointer-events: none 让遮罩不拦截拖动与点击，aria-hidden='true' 避免读屏器把装饰层读出来。

失败点三：遮罩压住滚动条

遮罩覆盖到滚动条区域时，滚动条被压在下面。用 scrollbar-gutter: stable 预留滚动条位置，或把遮罩底边抬到滚动条之上。

失败点四：滚到末端仍显示遮罩

末尾卡片被遮住会影响点击。纯 CSS 可用 animation-timeline: scroll(self inline) 让透明度跟随滚动进度；需要覆盖旧版本浏览器时，监听 scroll 事件切换类名。

检查清单

• 遮罩与滚动容器是兄弟关系，不是父子关系。
• 外层有明确的定位上下文。
• 遮罩关闭指针事件。
• 滚动到最右端时隐藏右侧遮罩。
• 渐变终点色与卡片区域底色一致，边缘才不会露出色差。