火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

表格滚动带跑页面:overscroll-behavior 加对层

发布于 6天前
2

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

平板上的数据图表
容器滚到底之后,滚动会继续向外层传递。图片来自 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 时,部分浏览器的手势行为异常,滚动截断表现不稳定,能去就去。触板上验证要用真机,桌面鼠标滚轮的行为与触屏动量不一致,单端通过不算数。

常见问题(FAQ)

overscroll-behavior 应该加在哪个元素
加在真正产生滚动的容器上,即带 overflow 与尺寸约束的那一层,table 与 tbody 都不是滚动上下文。
contain 起什么作用
contain 截断滚动向外层的传递但保留容器内回弹,表格内滚动到底不再带动页面。
none 与 contain 的区别
none 在 contain 基础上进一步禁用回弹效果与下拉刷新,适合全屏弹层类场景。
横纵两个方向能分开控制吗
overscroll-behavior-x 与 overscroll-behavior-y 独立设置,也可在简写里写两个值分别对应横纵。
为什么必须用真机验证
真机触屏与桌面滚轮的动量传递行为不同,触板手势必须在移动设备上实测。
overflow属性overscroll-behavior容器滚动滚动链表格单元格
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1