用 table.reloadData() + scrollPos: 'fixed' 才能锁住滚动条;table.reload() 会销毁重建 DOM 导致 scrollTop 重置为 0,而 reloadData() 配合 scrollPos: 'fixed'(需显式传参、调用正确、容器高度固定)可保留位置,失效时需手动存取 scrollTop 并在 done 回调中延迟恢复。
直接结论:用 table.reloaddata() + scrollpos: 'fixed',别用 table.reload()。 后者会清空重绘整个表格结构,滚动位置必然丢失;前者只换数据、不碰 dom 结构,配合正确配置才能真正锁住滚动条。
为什么 table.reload() 一定丢滚动位置
它会把整个表格容器(包括 .layui-table-box 和内部所有节点)销毁再重建。浏览器渲染新 DOM 时,.layui-table-body 是全新元素,scrollTop 默认为 0。即使你手动记了旧值,也找不到旧容器去恢复。
- 调用
table.reload()时,done回调触发前表格已清空,DOM 已重置 - 固定列、合并单元格、自定义模板等复杂结构,在重绘中容易错位或未同步滚动
- 没有内置机制在
reload()中保存/恢复scrollTop,源码里压根没这段逻辑
table.reloadData() 的 scrollPos: 'fixed' 怎么写才生效
这个配置必须同时满足三个条件,缺一不可:
- 调用的是
table.reloadData(),不是table.reload() - 参数对象里显式传入
scrollPos: 'fixed',不能只写在render初始化里 - 表格容器高度是固定的(比如设了
height: 500),否则.layui-table-body没滚动条,scrollTop无意义
示例:
table.reloadData('userTable', {
where: { status: 'active' },
scrollPos: 'fixed' // 必须在这里写,不是初始化时写
});
如果 scrollPos: 'fixed' 还是失效,怎么手动兜底
常见于低版本 Layui(≤2.8.18)、用了自定义 cell 模板、或表格嵌套在动态高度容器中。这时要自己存取 scrollTop:
- 重载前,用
$('.layui-table-body').scrollTop()取值并缓存到变量或data-属性 - 在
done回调里,等 DOM 稳定后(加setTimeout(..., 0)或监听table.on('rendered'))再执行恢复 - 注意:固定列不会随主表体滚动自动对齐,得额外调
table.resize()或手动同步.layui-table-fixed-l的scrollTop
简易兜底写法:
const $body = $('.layui-table-body');
const savedTop = $body.scrollTop();
table.reloadData('userTable', {
where: { q: 'xxx' }
}, function(res) {
setTimeout(() => {
$body.scrollTop(savedTop);
// 如果有固定列,也同步滚动
$('.layui-table-fixed-l').scrollTop(savedTop);
}, 0);
});
最易被忽略的一点:滚动位置恢复的时机比你想的更敏感——DOM 渲染完成 ≠ 表格列宽计算完成 ≠ 固定列 DOM 就位。哪怕只差几毫秒,scrollTop 设了也白设。


















