### [水平滚动容器里的固定遮罩层写法](https://www.huociguo.com/article/1596)

**Published:** 2026-10-01T10:42:32

**Author:** 米了

**Excerpt:** 横向滚动的卡片列表右侧常加一层渐变遮罩，提示后面还有内容。常见做法是把遮罩放进滚动容器内部并绝对定位，滚动时遮…

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

![办公桌上的 iMac 与 MacBook](https://api.huociguo.com/wp-content/uploads/2026/10/d11.jpg)

遮罩与滚动容器需要分层放置

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

`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 事件切换类名。

## 检查清单

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

**Tags:** overflow属性, sticky粘性定位, 横向滚动, 水平滚动容器, 遮罩层定位

**Categories:** HTML5

---