应监听 .layui-table-body(普通表格)或 .layui-table-box(启用固定列时)的原生 wheel 事件,必须在 table.render() 的 done 回调中通过 res.elem[0].queryselector() 获取对应容器并绑定,不可提前查询或使用 table.on('wheel')。

监听 layui-table-body 的 wheel 事件(纵向滚动)
直接给 table.render() 的 elem 容器绑 wheel 无效,因为真实滚动区域是内部的 .layui-table-body(普通表格)或 .layui-table-box(开启固定列时)。表格 DOM 必须就位才能绑定,否则查不到元素。
- 必须在
table.render()的done回调里操作,这是唯一能确保 DOM 渲染完成、且拿到res.elem实例的时机 - 用
res.elem[0].querySelector('.layui-table-body')获取滚动体,再调addEventListener('wheel', handler) - 若启用了
fixed: true,.layui-table-box才是主滚动容器,需额外监听它 - 如需自定义滚动行为(比如阻止默认滚动、做防抖或节流),务必加
e.preventDefault() - 不要用
table.on('wheel', ...)—— Layui 的table.on()不代理原生wheel事件,写了也不会触发
监听 layui-table-box 的 scroll 事件(横向滚动)
scroll 是原生事件,Layui 表格不提供对应封装,也不能通过 table.on('scroll') 监听。真正触发横向滚动的是 .layui-table-box 这个带 overflow-x: auto 的容器,它包裹着表头和数据体。
- 同样必须在
done回调中查询.layui-table-box,不能提前查或用document.querySelector全局找(可能拿错实例) - 横向滚动时
scrollTop基本不变,判断方向应以scrollLeft变化为主 - 高频滚动下
scroll事件会密集触发,建议用requestAnimationFrame或简单setTimeout节流 - 不要监听
.layui-table-main—— 它不负责横向滚动,绑定后无反应
检测是否滚动到最右侧(scrollLeft 边界判断)
没有现成的 “滚动到最右” 事件,只能靠 scroll 中实时计算:scrollLeft >= scrollWidth - clientWidth - 1。这个容差 -1 很关键,浏览器缩放、字体渲染、移动端 WebView 都会导致小数像素误差。
- 严格用
===容易漏判,尤其在 Windows 缩放 125%/150% 场景下 - 不要依赖
Math.round(scrollLeft),Safari 和某些 WebView 返回非整数值 - 如果后续调用
table.resize()、拖拽列宽或动态插入列,scrollWidth和clientWidth会变,需重新读取或重绑 - 缓存上一次
scrollLeft值做差值判断,可避免重复触发业务逻辑
固定列场景下的多容器滚动同步陷阱
当启用 fixed: 'left' 或 'right' 后,左右固定区是独立的 .layui-table-fixed-left / .layui-table-fixed-right 容器,它们的 scrollLeft 不会自动同步到主体,wheel 和 scroll 事件也互不冒泡。
- 必须单独监听
.layui-table-body的scroll,再手动设置两个 fixed 容器的scrollLeft - 虚拟滚动 + 固定列时,这个问题更严重:每个容器 scrollTop/scrollLeft 状态都要独立维护
- 横向快速滚动时,可能出现 fixed 区和主体短暂不同步,建议加
requestAnimationFrame批量更新 - 检查
fixed值是否为字符串'left'或'right'—— 写成true、'Left'或空字符串都会静默失效











