需监听 .layui-table-box .layui-table-body 的 scroll 事件,实时计算 scrollleft >= scrollwidth - clientwidth - 1 判断是否滚动到最右,rendered 回调中绑定并防抖,动态列宽后须重新读取尺寸。
layui table 横向滚动到底部/右侧时怎么检测
layui 的 table 组件本身不提供 scrollleft 或 “滚动到最右” 这类原生事件监听接口,也没有 onscrollright 这样的配置项。你得自己抓容器的 scroll 事件,再手动判断是否触达右边界。
监听 table-body 的 scroll 事件并判断是否到最右
关键不是监听整个 table 元素,而是它的内部滚动容器:.layui-table-box .layui-table-body(带横向滚动条的那个 div)。这个容器的 scrollLeft 值达到最大值时,才算“滑到了最右侧”。
注意:必须等 table 渲染完成后再绑定,否则 DOM 找不到;且要防抖,避免高频触发。
- 用
table.on('rendered', ...)或setTimeout(..., 0)确保 DOM 已就绪 - 计算最大可滚动距离:
scrollWidth - clientWidth - 对比
element.scrollLeft === element.scrollWidth - element.clientWidth(注意是严格相等) - 不要监听
.layui-table-main—— 它不负责横向滚动,会失效
table.on('rendered', function(obj){
let body = document.querySelector('.layui-table-box .layui-table-body');
if (!body) return;
<p>let handler = function(){
if (body.scrollLeft >= body.scrollWidth - body.clientWidth - 1) {
console.log('已滚动到最右侧');
// 这里写你的业务逻辑
}
};</p><p>// 防抖简单处理(实际建议用 debounce 函数)
let timer;
body.onscroll = function(){
clearTimeout(timer);
timer = setTimeout(handler, 50);
};
});</p>
为什么用 >= 而不是 === 判断最右位置
浏览器对小数像素、缩放、字体渲染等的处理会让 scrollLeft 和理论最大值存在 0.1~1px 的误差,尤其在 Windows + 缩放 125% / 150% 场景下常见。直接用 === 容易漏判。
-
scrollWidth - clientWidth是理论最大值,但scrollLeft实际可能略小或略大 - 加一个容差(比如
-1)比严格相等更稳 - 别用
Math.round()包裹——某些版本 Chrome 返回的是整数,但 Safari 可能返回小数 - 移动端 WebView(如微信内嵌)更容易出现非整数值,容差必须留
表格列宽动态变化后,最右判断失效怎么办
如果后续调用了 table.resize()、或用户拖拽调整了列宽、或 JS 动态插入了新列,scrollWidth 和 clientWidth 都会变,但你的监听函数里缓存的旧值不会自动更新。
- 每次可能影响宽度的操作后,必须重新获取
scrollWidth和clientWidth - 不要把这两个值提成外层变量缓存,要在 handler 里实时读取
- 如果用了
table.reload(),记得重新绑定 scroll 事件(rendered 回调会再次触发) - 列固定(
fixed: 'right')时,右侧固定列不参与横向滚动,不影响判断逻辑
真正麻烦的是多页表格 + 固定表头 + 动态列宽组合场景:滚动容器可能被重绘多次,onscroll 绑定容易丢失或重复。这种时候,宁可每次 rendered 都先 off 再 on,也别指望一次绑定管到底。











