DataTables：隐藏tbody的滚动条时，固定列会搞乱

我有一张桌子，其中包括：

1. 第一列是固定的
2. TFOOT
3. 水平滚动条的脚
4. 有隐藏的水平滚动条。

小提琴： 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 } }); }); 

在这种情况下，当您滚动到右侧时，您将看到固定列的最后一行单元格（背景颜色：红色）搞砸了，因为隐藏了水平

滚动条。

我的问题：有没有办法纠正这个？

顺便说一句：我不得不隐藏

水平滚动条，因为它没有与

滚动条同步。

非常感谢

编辑：在Chrome中是相同的：

Answer 1

这是部分解决方案。 整个设置是不同表和div的巨大组合。 由于某种原因，隐藏的滚动条仍然对几个div有“效果”，即它们仍占用空间并在滚动其他元素时做出反应。 也许真的，非常小心的尝试和错误CSS-ing每个元素/容器可以解决整体问题，但对我来说，它似乎是预期的浏览器行为，只是“原样”。 但是在webkit浏览器上你可以这样做：

 div:not(.dataTables_scrollFoot)::-webkit-scrollbar { display: none; } 

https://jsfiddle.net/6sxh3gbk/19/

这将有效地禁用注入的

元素上所有令人讨厌的隐藏（但不是真正隐藏）滚动条，但将它们保存在我们想要滚动的页脚元素上。

但这仅适用于webkit浏览器 ：Chrome，Chrome，Safari，Opera和Android。

Gecko（mozilla）曾经有一个类似的function-moz-scrollbars-none但是它被弃用了并且被遗漏了。 AFAIK永远都会把它带回来。

这也是Edge的情况， 问题仍然存在 。 对于Edge来说真的有希望，因为MS多次声明EdgeHTML与WebKit布局引擎完全兼容。

所以包括所有设备的部分解决方案，覆盖率可能达到85％。

Answer 2

请检查..

1. 第一列是固定的
2. TFOOT
3. 水平滚动条的脚
4. 有隐藏的水平滚动条。

这个问题已经解决了。 您的ans在下面的链接中给出..

 $(function() { $('#example').DataTable({ scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1 } }); }); 

小提琴