FastAdmin自定义滚动条

效果

实现过程

HTML代码

html 复制代码
<style>
    .custom-scrollbar {
        position: fixed;
        /*bottom: 0px;*/
        height: 20px;
        width: 97.5%;
        overflow-y: scroll;
        overflow-x: scroll;
        z-index: 100;
    }

    #scrollDivTable{
        height: 20px;
    }

    /*原滚动条不显示*/
    /*.fixed-table-body::-webkit-scrollbar {*/
    /*    display: none;*/
    /*}*/
</style>

<div id="scrollDiv" class="custom-scrollbar">
    <div id="scrollDivTable"></div>
</div>

JS代码

在对于JS文件中的 var table = $("#table"); 下方添加如下代码:

javascript 复制代码
// 自定义滚动条功能
var setupCustomScrollbar = function() {
    var $table = $('#table');
    var $scrollDiv = $('#scrollDiv');
    var $scrollDivTable = $('#scrollDivTable');

    // 移除可能存在的旧的克隆表格
    $scrollDivTable.empty();

    // 创建一个与原表格列宽相同的表格
    var $clonedTable = $table.clone().removeAttr('id').addClass('cloned-table');
    $clonedTable.find('tbody').remove(); // 只需要表头
    $scrollDivTable.append($clonedTable);

    // 同步原表格和克隆表格的列宽
    function syncColumnWidths() {
        $table.find('thead th').each(function(index) {
            var width = $(this).outerWidth();
                $clonedTable.find('thead th').eq(index).outerWidth(width);
            });
        $scrollDivTable.width($table.outerWidth());
    }

    // 绑定滚动事件
    $scrollDiv.off('scroll').on('scroll', function() {
        $table.parent('.fixed-table-body').scrollLeft($scrollDiv.scrollLeft());
    });

    $table.parent('.fixed-table-body').off('scroll').on('scroll', function() {
        $scrollDiv.scrollLeft($(this).scrollLeft());
    });

    // 窗口调整大小时重新同步列宽
    $(window).off('resize.customScrollbar').on('resize.customScrollbar', syncColumnWidths);

    // 表格数据加载完成后同步列宽
    $table.on('post-body.bs.table', function() {
        setTimeout(syncColumnWidths, 0); // 使用 setTimeout 确保在 DOM 更新后同步
    });

    // 初始同步列宽
    setTimeout(syncColumnWidths, 0);
};
javascript 复制代码
onPostBody: function() {
    setupCustomScrollbar();
}
相关推荐
appleคิดถึง1 个月前
fastadmin 列表页表格实现动态列
android·fastadmin·tp5
appleคิดถึง1 个月前
fastadmin 多商户模式下侧边栏跳转路径BUG
fastadmin·多商户
向宇it2 个月前
fastadmin搜索刷新列表,怎么限制用户频繁点击?
开发语言·前端·javascript·fastadmin
向宇it2 个月前
FastAdmin列表用echats渲染,使用表格的templateView实现一个图表渲染的功能
php·web·fastadmin
向宇it2 个月前
一张图解析FastAdmin中的弹出窗口的功能(备份)
php·fastadmin
梦夏夜3 个月前
fastadmin 文件上传七牛云
php·七牛云存储·fastadmin·tp5
wxp5064 个月前
fastadmin插件市场暂不可用,是否切换到本地插件
fastadmin
张小勇4 个月前
thinkphp5多层with关联查询错误问题
thinkphp·fastadmin
张小勇5 个月前
thinkphp通过with查询,并通过关联表进行筛选
thinkphp·fastadmin
张小勇5 个月前
fastadmin完全自定义页面内容
fastadmin