### [表格滚动带跑页面：overscroll-behavior 加对层](https://www.huociguo.com/article/1770)

**Published:** 2026-10-02T10:06:20

**Author:** 米了

**Excerpt:** 宽表格套在容器里横向滚动，滚到尽头继续滚，整个页面跟着跑偏。滚动链没有截断，事件的动量传递到了外层。 容器滚到…

宽表格套在容器里横向滚动，滚到尽头继续滚，整个页面跟着跑偏。滚动链没有截断，事件的动量传递到了外层。

![平板上的数据图表](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-187041.jpeg)

容器滚到底之后，滚动会继续向外层传递。图片来自 Pexels。

## 加错层级是常态

.table-wrapper {
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

overscroll-behavior 必须加在真正产生滚动的容器上，也就是带 overflow 的那一层。加到 table 或 tbody 上没有任何效果，两者都不是滚动上下文。

## 三个取值

| 取值  | 行为  |
| --- | --- |
| auto | 默认，滚到尽头向外层传递 |
| contain | 截断传递，保留容器内回弹 |
| none | 截断传递，同时禁用回弹与下拉刷新 |

表格场景用 contain，保留滚动手感。全屏弹层用 none，把背景滚动与手势刷新一并封死。

## 方向可以分开

overscroll-behavior-x 与 overscroll-behavior-y 独立设置。宽表格只截横向传递，纵向保持默认，写法是单行声明 overscroll-behavior: auto contain 或拆成两条。

## 两个干扰项

容器上有 transform 时，部分浏览器的手势行为异常，滚动截断表现不稳定，能去就去。触板上验证要用真机，桌面鼠标滚轮的行为与触屏动量不一致，单端通过不算数。

**Tags:** overflow属性, overscroll-behavior, 容器滚动, 滚动链, 表格单元格

**Categories:** HTML5

---