jquery - 在 mCustomScrollbar 中保留固定的表头

Question

HTML

 <div class="tableData" id="indexTable">
     <table>
         <thead>
             "..."             
         </thead>
         <tbody>
             "..."             
         </tbody>
     </table>
</div>

CSS (.tableData)

.tableData {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

    box-shadow: 10px 10px 5px #000;
    overflow: auto;
    margin: 20px;
    width: 92%;
}

jQuery

var topOffset = parseInt($(".tableData table thead").css('top'));

(function($){
    $(window).load(function(){
        $(".tableData").mCustomScrollbar({
            axis: "yx",
            theme: "dark",
            scrollbarPosition: "outside",
            setHeight: "630",
            setWidth: "1218",
            callbacks: {
                whileScrolling: function() {
                    var contentPos = $(this.mcs.top);
                    $('.tableData thead').css({
                        'top': contentPos + topOffset
                    })
                }
            }
       });
   });
})(jQuery);

我想要完成的是在滚动浏览表格中的数据时修复我的表格标题。我遇到了一些尝试实现这一目标的方法:

<强>1。 jQuery.floatThead

floatThead和 mCustomScrollbar在我的情况下似乎相互矛盾 floatThead没有按预期工作。

<强>2。 '位置:固定'

这似乎是我想要的最佳解决方案。但是，如果我这样做，那么 <thead>水平离开页面，因为它需要滚动。

我的想法是，如果我能找到一种方法来只固定 <thead> 的 Y 位置(这是我在上面的 jQuery 中尝试过的)然后就可以了，但运气不好。

Answer 1

我最终放弃了 mCustomScrollber，因为它没有提供我想要的足够功能。但是，我仍然想创建一个固定的 header ，我发现这段代码可以解决问题:

function fixHead(table) {
    table.attr("data-item-original-width", table.width());
    table.find('.thead .tr .th').each(function() {
        jQuery(this).attr("data-item-original-width", jQuery(this).width());
    });
    table.find('.tbody .tr:eq(0) .td').each(function() {
        jQuery(this).attr("data-item-original-width", jQuery(this).width());
    });

    var newTable = table.clone();

    table.find('.thead .tr').each(function() {
        jQuery(this).remove();
    });
    newTable.find('.tbody .tr').remove();

    table.parent().parent().parent().prepend(newTable);
    newTable.wrap("<div/>");
    newTable.parent().addClass('fixed-head__wrap');

    newTable.width(newTable.attr('data-item-original-width'));
    newTable.find('.thead .tr .th').each(function(){
        jQuery(this).width(jQuery(this).attr("data-item-original-width"));
    });
    table.width(table.attr('data-item-original-width'));
    table.find('.tbody .tr:eq(0) .td').each(function(){
        jQuery(this).width(jQuery(this).attr("data-item-original-width"));
    });
}

table 是您的表格元素(即 $('table'))。我意识到这不是 mCustomScrollbar 特有的，但效果应该与它所做的相同，即从原始表中取出 thead 并将其复制到一个单独的表中。这个单独的表没有 tbody 并且有一个固定的位置。 thead 也从原始表中删除，因此只剩下它的正文。

我希望这对仍然想要实现固定标题效果的任何人有所帮助

我能够使用 CSS 在 Chrome 中自定义滚动条:

::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}

::-webkit-scrollbar-thumb {
    background-color:#25628e;
}

::-webkit-scrollbar-track {
    background-color: #b2c5d9;
    border-right: 1px solid rgb(169, 169, 169);
}

请访问CSS Tricks了解更多信息