Skip to main content
 首页 » 编程设计

jquery之DataTables:当隐藏 tbody 的滚动条时,固定列会变得困惑

2026年04月16日6263jpfss

我有一个表格,其中包括:

  1. 第一列已修复
  2. 脚
  3. tfoot水平滚动条
  4. 隐藏了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 
                } 
 }); 
        }); 

在这种情况下,当您滚动到右侧时,您会看到固定列的最后一行单元格(背景颜色:红色)变得困惑,因为水平 <tbody>滚动条被隐藏。

我的问题:有什么办法可以纠正这个问题吗?

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

非常感谢

编辑:在 Chrome 中是相同的:

请您参考如下方法:

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

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

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

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

但这仅适用于 webkit browsers :Chrome、Chromium、Safari、Opera 和 Android。

Gecko (mozilla) 曾经有过类似的功能 -moz-scrollbars-none但它已被弃用并被排除在外。据我所知,人们一直在呼吁将其带回来。

Edge 也是如此,issue is still being raised 。对于 Edge 来说,确实有希望,因为 MS 多次声明 EdgeHTML 旨在与 WebKit 布局引擎完全兼容。

这是一个部分解决方案,大约覆盖 85%,包括所有设备。