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

加错层级是常态
.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 时,部分浏览器的手势行为异常,滚动截断表现不稳定,能去就去。触板上验证要用真机,桌面鼠标滚轮的行为与触屏动量不一致,单端通过不算数。
