javascript - 带滚动条的表格中的绝对/固定标题

Question

我有一个表，其中包含我无法控制的数据(它来自用户)。我们使用一个名为Clusterize的插件这让我们可以平滑地滚动数万行，这些行具有所需的某种特定类型的标记(您将在我的 JSBin 中看到“集群”类)。

问题是，在具有滚动条(例如 Windows 或 OS X)并插入鼠标的计算机上，我们的固定表格标题上没有滚动条，这使得当您水平滚动时，它不会以相同的“速度”正确滚动由于宽度或其他原因导致整个表格溢出。我在 JSBin 链接中有一个行为示例。

同样，在带有滚动条的计算机上。您也可以在 OS X 偏好设置中始终打开滚动条。

http://output.jsbin.com/wekafiq

这里还有一些屏幕截图。第一个是不滚动，第二个是向右滚动时。

我愿意接受任何可能的修复，包括仅 CSS、仅 JS 或其他任何内容。我花了大约 2 天的时间尝试不同的事情，这是我所得到的最接近的结果，但我已经没有想法了。

Answer 1

类似的问题已经在 Clusterize 的 gitter 中讨论过，查看 https://gitter.im/NeXTs/Clusterize.js

您可以在主表之外添加单独的表，仅用于标题，并使其与主区域列宽度保持同步。

示例 http://codepen.io/NeXTs/pen/ZbmWqg

var fitHeaders = (function() {
  var prevWidth = [];
  return function() {
    var $firstRow = $('#contentArea tr:not(.clusterize-extra-row):first');
    var columnsWidth = [];
    $firstRow.children().each(function() {
      columnsWidth.push($(this).width());
    });
    if(columnsWidth.toString() == prevWidth.toString()) return;
    $('#headerArea tr').children().each(function(i) {
      $(this).width(columnsWidth[i]);
    });
    prevWidth = columnsWidth;
  }
})();

var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea',
  callbacks: {

    // Update headers width on cluster change
    clusterChanged: function() {
      fitHeaders();
    }
  }
});

// Update headers width on window resize
$(window).resize(_.debounce(fitHeaders, 150));