layui 数据表格横向滚动条位置
调整滚动条位置在合计下方
查阅layui table 源码得知其处理如下:
所以我们反向处理一下同步就行:
- 样式调整
<style>
.layui-table-total {
overflow: auto;
}
.layui-table-body {
overflow-x: hidden;
}
</style>
- 监听下方滚动条,并同步
//同步滚动条
let layTotal = $("[lay-id='salary'] .layui-table-total")
let layHeader = $("[lay-id='salary'] .layui-table-header")
let layFixBody = $("[lay-id='salary'] .layui-table-fixed .layui-table-body")
let layBody = $("[lay-id='salary'] .layui-table-body")
layTotal.scroll(function () {
let othis = $(this)
,scrollLeft = othis.scrollLeft()
,scrollTop = othis.scrollTop();
layHeader.scrollLeft(scrollLeft);
layBody.scrollLeft(scrollLeft);
// layFixBody.scrollLeft(scrollLeft);
})
最终效果如下: