Question

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

第一列已修复
TFOOT
tfoot的水平滚动条
隐藏了tbody的水平滚动条。

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

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

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

顺便说一句：我不得不隐藏<tbody>水平滚动条，因为它没有与<tfoot>滚动条同步。

非常感谢

编辑：在Chrome中是相同的：

Answer 1

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

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

<强> https://jsfiddle.net/6sxh3gbk/19/

这将有效地禁用注入的<div>元素上所有令人讨厌的隐藏（但不是真正隐藏）的滚动条，但将它们保存在我们要滚动的页脚元素上。

但这只适用于webkit browsers：Chrome，Chrome，Safari，Opera和Android。

Gecko（mozilla）曾经有一个类似的功能-moz-scrollbars-none，但它被弃用并遗漏了。 AFAIK永远不会让它回归。

Edge也是issue is still being raised的情况。对于Edge来说真的有希望，因为MS多次声明EdgeHTML与WebKit布局引擎完全兼容。

部分解决方案，涵盖85％，包括所有设备。

Answer 2

请检查..

第一列已修复
TFOOT
tfoot的水平滚动条
隐藏了tbody的水平滚动条。

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

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

Fiddle

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

2 个答案: