Layui表格固定列不能滚动问题，亲测可用

最新推荐文章于 2024-09-08 18:00:56 发布

qq_35178953

最新推荐文章于 2024-09-08 18:00:56 发布

阅读量2.4k

点赞数 7

文章标签： layui javascript

本文链接：https://blog.csdn.net/qq_35178953/article/details/118707719

版权

这段代码主要处理了layui表格在固定列时的滚动同步问题。通过CSS隐藏了默认的滚动条，当鼠标悬停时显示滚动条并实现主表格与左右固定列的滚动同步。JS部分监听了鼠标悬停在不同区域时的滚动事件，确保所有相关部分的滚动位置保持一致。

摘要由CSDN通过智能技术生成

css:

.layui-table-fixed .layui-table-body::-webkit-scrollbar {display:none}
.layui-table-fixed .layui-table-body:hover{overflow-y: auto;}

JS:

$(".layui-table-fixed-l .layui-table-body").hover(function () {
        $(".layui-table-fixed-l .layui-table-body").scroll(function () {
            $(".layui-table-main").off("scroll");
            $(".layui-table-fixed-r .layui-table-body").off("scroll");
            var scroH = $(this).scrollTop();  //滚动高度
            $(".layui-table-main").scrollTop(scroH);
            $(".layui-table-fixed-r .layui-table-body").scrollTop(scroH);
        });
    });
$(".layui-table-main").hover(function () {
        $(".layui-table-main").scroll(function () {
            $(".layui-table-fixed-l .layui-table-body").off("scroll");
            $(".layui-table-fixed-r .layui-table-body").off("scroll");
            var scroH = $(this).scrollTop();  //滚动高度
            var scroL = $(this).scrollLeft();
            $(".layui-table-header").scrollLeft(scroL);//表头跟着滚动
            $(".layui-table-fixed-l .layui-table-body").scrollTop(scroH);//左固定列
            $(".layui-table-fixed-r .layui-table-body").scrollTop(scroH);//右固定列
        });
});
$(".layui-table-fixed-r .layui-table-body").hover(function () {
        $(".layui-table-fixed-r .layui-table-body").scroll(function () {
            $(".layui-table-main").off("scroll");
            $(".layui-table-fixed-l .layui-table-body").off("scroll");
            var scroH = $(this).scrollTop();  //滚动高度
            $(".layui-table-main").scrollTop(scroH);
            $(".layui-table-fixed-l .layui-table-body").scrollTop(scroH);
        });
});