我使用jQuery DataTables插件和"scrollX":true
进行水平滚动。
为什么滚动条出现在tfoot
标签上方?如何使其显示在页脚下方?
var table = $('#example')
.DataTable(
{
"scrollX": true,
"scrollCollapse": true,
"dom": 'Zlrtip',
"colResize": {
"tableWidthFixed": false,
//"handleWidth": 10,
"resizeCallback": function(column)
{
}
},
"searching": false,
"paging": false,
"info": false,
"deferRender": true,
"sScrollX": "190%"
});
请参阅JSFiddle example演示问题。
发布于 2015-06-15 20:40:30
您需要将以下代码添加到DataTables初始化选项中:
"fnInitComplete": function(){
// Disable TBODY scoll bars
$('.dataTables_scrollBody').css({
'overflow': 'hidden',
'border': '0'
});
// Enable TFOOT scoll bars
$('.dataTables_scrollFoot').css('overflow', 'auto');
// Sync TFOOT scrolling with TBODY
$('.dataTables_scrollFoot').on('scroll', function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
有关演示,请参阅updated JSFiddle。
发布于 2019-03-19 04:08:11
我更喜欢雅弗斯·阿德万的答案,但它在Windows上不起作用,所以我修改了禁用tbody滚动条的代码。
// Disable TBODY scroll bars
if (!device.isMac && !device.isAndroid) {
// for Windows
scrollBody.css({'-ms-overflow-style': 'none'})
} else {
scrollBody.css({ 'overflow-x': 'hidden' });
}
在Windows上使用键盘箭头滚动仍然非常慢,大概是因为DataTables的tbody scroll listener触发了tfoot scroll listener,而tbody又触发了tbody等等(参见How to Synchronize Scroll Between two windows)当我禁用了DT侦听器并将其替换为我自己的时,这个问题就解决了。
$(scrollBody).off('scroll.DT');
var ignore = false;
// Sync TFOOT scrolling with TBODY
function syncScroll(elA, elB) {
function scrollLeft(el, position) {
ignore = true;
el.scrollLeft(position);
}
$(elA).scroll(function() {
var tmpIgnore = ignore;
ignore = false;
if (!tmpIgnore) {
var scrollPos = $(elA).scrollLeft();
$(scrollHead).scrollLeft(scrollPos);
scrollLeft($(elB), scrollPos);
}
});
}
syncScroll(scrollBody, scrollFoot);
syncScroll(scrollFoot, scrollBody);
https://stackoverflow.com/questions/30843811
复制相似问题