done回调中直接设置scrolltop=scrollheight会失败,因为此时tbody尚未插入dom,scrollheight常为0或旧值;必须用settimeout(() => {}, 0)延迟至下一轮事件循环确保dom就绪后再滚动。

直接在 done 回调里调用 scrollTop = scrollHeight 不可靠,因为 DOM 尚未完成渲染,scrollHeight 常为 0 或旧值。
为什么 done 里直接滚动到底部会失败
layui 的 done 回调触发时机早于 tbody 实际插入文档——它只表示“数据已处理完、准备开始渲染”,但 tr 节点还没 append 到 DOM。此时查 .layui-table-body.scrollHeight 多数返回 0 或上一次的高度,scrollTop 设了也白设。
- 常见现象:滚动条纹丝不动,或只滚到一半
- 错误写法:
$('.layui-table-body').scrollTop($('.layui-table-body')[0].scrollHeight)放在 done 里 - 根本原因:DOM 还没挂载,
scrollHeight拿不到真实值
必须用 setTimeout(() => {}, 0) 延迟到下一轮事件循环
这是最轻量、最可靠的兜底方案:让 JS 等浏览器把 tr 插入 DOM 后再执行滚动逻辑。
- 在
done里保存表格实例或容器引用,别直接操作 DOM - 用
setTimeout延迟 0ms,确保进入下一个宏任务,此时 DOM 已就绪 - 目标是
.layui-table-body,不是.layui-table-box或window
done: function(res, curr, count) {
setTimeout(() => {
const body = $('.layui-table-body')[0];
if (body) {
body.scrollTop = body.scrollHeight;
}
}, 0);
}
如果启用了固定表头(fixed: true),要额外处理表头遮挡
固定表头会让 tbody 的 offsetTop 和可视区域计算失准,直接 scrollHeight 滚到底可能被表头盖住最后一行。
- 简单补救:加一个像素偏移,如
body.scrollTop = body.scrollHeight - body.clientHeight + 2 - 更稳妥:先获取表头高度(通常
$('.layui-table-header').outerHeight()),再减去它 - 注意:若用了
height参数(如height: 500),clientHeight就是那个值,别混用
reload 后还想滚到底部?得手动存 height 再恢复
table.reload() 是全量重绘,done 逻辑同上;但如果你在 reload 前已经滚过底部,想保持“追加感”,就得自己记下上次的 scrollHeight,并在新数据加载完后按差值滚动。
- reload 前:缓存
lastHeight = $('.layui-table-body')[0].scrollHeight - reload 的 done 里:等 DOM 就绪后,算出新增高度
newHeight - lastHeight,再scrollTop += delta - 不推荐直接设
scrollTop = scrollHeight,否则每次 reload 都强制滚到底,打断用户浏览
真正容易被忽略的是:固定表头 + reload + 滚动到底部,这三者叠加时,scrollHeight 可能包含隐藏行或占位符高度,必须实测 offset 偏差并微调。别信“设一次就完事”。











