DataTables：隐藏tbody的滚动条时，固定列会搞乱 [英] DataTables: When scroll bar of tbody is hidden, fixed column gets messed up
问题描述
我有一张桌子，其中包括：
- 第一列是固定的
- tfoot
- tfoot的水平滚动条
- 隐藏了tbody的水平滚动条。
小提琴：
$（function（）{
$（'＃example'）。DataTable（{
fnInitComplete：function（）{
//禁用Head $中的滚动b $ b $（'。dataTables_scrollHead'）。css（{
'overver -y'：'hidden！important'
}）;
//禁用TBODY滚动条
$（'。dataTables_scrollBody'）。css（{
'overver -y'：'scroll'，
'spresh-x'：'hidden'，
'border' ：'none'
}）;
//启用TFOOT scoll bars
$（'。dataTables_scrollFoot'）。css（'overflow'，'auto'）;
//使用TBODY同步TFOOT滚动
$（'。dataTables_scrollFoot'）。on（'scroll'，function（）{
$（'。dataTables_scrollBody'）。scrollLeft （$（this）.scrollLeft（））;
}）;
}，
scrollX：true，
paging：true，
fixedColumns：{
leftColumns：1
}
} ）;
}）;
在这种情况下，当您滚动到右侧时，您将看到固定的最后一行单元格列（背景颜色：红色）搞砸了，因为水平< tbody> 滚动条被隐藏。
我的问题：有没有办法纠正这个问题？
顺便说一句：我不得不隐藏< tbody> 水平滚动条，因为它没有与< tfoot> 滚动条同步。
非常感谢
编辑：在Chrome中是相同的：
这是部分解决方案。整个设置是不同表和div的巨大组合。由于某种原因，隐藏的滚动条仍然对几个div有效果，即它们仍占用空间并在滚动其他元素时做出反应。也许真的，非常小心的尝试和错误CSS-ing每个元素/容器可以解决整体问题，但对我来说，它似乎是预期的浏览器行为，只是原样。但是在webkit浏览器上你可以这样做：
div：not（.dataTables_scrollFoot）:: -webkit-scrollbar {
display：none;
}
https://jsfiddle.net/6sxh3gbk/19/
这将有效在注入的< div> 元素上禁用所有令人讨厌的隐藏（但不是真正隐藏）的滚动条，但将它们保存在我们要滚动的页脚元素上。
但这仅适用于 webkit浏览器：Chrome，Chrome，Safari，Opera和Android。
Gecko（mozilla）曾经有一个类似的功能 -moz-scrollbars-none 但它被弃用并遗漏了。 AFAIK永远不会让它回归。
Edge也是如此，问题仍然存在。对于Edge来说真的有希望，因为MS多次声明EdgeHTML与WebKit布局引擎完全兼容。
这是一个部分解决方案，可能涵盖85 ％，包括所有设备。
I've got a table which includes:
- first Column is fixed
- tfoot
- horizontal scroll bar of tfoot
- have hidden horizontal scroll bar of tbody.
Fiddle: https://jsfiddle.net/jbeteta/6sxh3gbk/12/
$(function() {
$('#example').DataTable({
"fnInitComplete": function () {
// Disable scrolling in Head
$('.dataTables_scrollHead').css({
'overflow-y': 'hidden !important'
});
// Disable TBODY scroll bars
$('.dataTables_scrollBody').css({
'overflow-y': 'scroll',
'overflow-x': 'hidden',
'border': 'none'
});
// Enable TFOOT scoll bars
$('.dataTables_scrollFoot').css('overflow', 'auto');
// Sync TFOOT scrolling with TBODY
$('.dataTables_scrollFoot').on('scroll', function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
scrollX: true,
paging: true,
fixedColumns: {
leftColumns: 1
}
});
});
In that scenario, when you scroll to the right side, you will see that last row cell of fixed Column (background color: red) get messed up, because horizontal <tbody> scroll bar is hidden.
My question: Is there any way to correct this?
By the way: I had to hide <tbody> horizontal scroll bar because it doesn't get syncronized with <tfoot> scroll bar.
Many thanks
EDIT: In Chrome is the same:
Here is a partly solution. The entire setup is a huge mix of different tables and divs. For some reason the hidden scrollbars still is in "effect" for several of the divs, i.e they still take up space and react when other elements is being scrolled. Perhaps really, really careful try and error CSS-ing on each element / container could solve the overall problem, but to me it seems like expected browser behaviour, simply "as it is". But on webkit-browsers you can do this :
div:not(.dataTables_scrollFoot)::-webkit-scrollbar {
display: none;
}
https://jsfiddle.net/6sxh3gbk/19/
This will effectively disable all the nasty hidden (but not really hidden) scrollbars on the injected <div> elements, but preserve them on the footer element which we want to scroll with.
But this does only apply to webkit browsers: Chrome, chromium, Safari, Opera and Android.
Gecko (mozilla) once had a similar feature -moz-scrollbars-none but it was deprecated and left out. AFAIK there is a permanent cry for bringing it back.
This is also the case for Edge, the issue is still being raised. For Edge there is real hope, since MS many times have stated that EdgeHTML is meant to be fully compatible with the WebKit layout engine.
So a partly solution, covering perhaps 85%, all devices included.
这篇关于DataTables：隐藏tbody的滚动条时，固定列会搞乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
