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 中尝试过的)然后就可以了,但运气不好。
最佳答案
我最终放弃了 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了解更多信息
关于jquery - 在 mCustomScrollbar 中保留固定的表头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33013285/