table.reload() 后滚动条跳回顶部是默认行为,因 DOM 重建导致滚动位置丢失,需在 done 回调中用 setTimeout 恢复 scrollTop,并依 height 配置准确选取滚动容器(.layui-table-box 或外层容器),注意移动端 Safari 兼容性。
table.reload() 后滚动条跳回顶部是默认行为
layui 的 table.reload() 会清空并重建整个表格 dom(包括 tbody),滚动位置必然丢失——这不是 bug,是组件设计逻辑。它不自动保存或恢复任何 ui 状态,包括 .layui-table-box 或 .layui-table-body 的 scrolltop 值。
必须在 done 回调里恢复滚动位置,且要加 setTimeout
done 是唯一可靠的时机:此时新 DOM 已插入、样式已计算、滚动容器可读写。但直接赋值 scrollTop 仍有风险,因为浏览器可能尚未完成布局渲染。
- 用
setTimeout(() => { container.scrollTop = savedPos; }, 0)确保执行在渲染队列末尾 - 不要用
page或success回调——前者触发太早,后者只针对异步请求,不覆盖本地数据重载场景 - 如果表格启用了
height配置(如height: 400),滚动容器是.layui-table-box;没设height时,滚动发生在body或外层容器,需另行判断
怎么准确获取和设置滚动容器
目标容器选错是失败主因。Layui 表格的滚动结构分情况:
- 固定高度表格(
height设置了):滚动宿主是.layui-table-box,不是.layui-table-main或.layui-table-body - 自适应高度表格(没设
height):滚动通常在body,但若表格被包裹在带overflow: auto的 div 里,则要操作那个父容器 - TreeTable 启用
scrollPos: 'fixed'可免手动处理,但仅限 TreeTable 组件,且需确认版本支持(2.8+ 稳定)
移动端 Safari 下 scrollTop 失效怎么办
iOS Safari 对 scrollTop 赋值有严格限制:目标元素必须显式声明 overflow-y: auto(不能靠父级撑开),且未被 touch 事件阻断。
- 兜底方案:先设
element.scrollTop = 0,再调用element.scrollIntoView({ block: 'start', behavior: 'auto' }) - 避免用
behavior: 'smooth'—— Layui 低版本不兼容,且与分页动画冲突 - 注意浮点误差:移动端缩放后
scrollTop可能是小数,存取时建议用Math.round()











