带有滚动条

Question

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

问题在于，如果计算机上有滚动条，如Windows或OS X，并且插入了鼠标，则我们的固定表格标题上没有滚动条，这样当水平滚动时它不会以相同的“速度”向右滚动因为宽度不同而导致整个表溢出。我在JSBin链接中有一个行为示例。

再次，在带有滚动条的计算机上。您也可以在OS X首选项中一直打开滚动条。

http://output.jsbin.com/wekafiq

这里也有一些截图。第一个是不滚动，第二个是滚动到右边。

我对任何可能的修复都是开放的，这些修复只是CSS，只有JS或其他任何东西。我花了两天时间尝试不同的事情，这是我得到的最接近的事情，而且我没有想法。

Answer 1

类似问题已经在Clusterize＆＃39; 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));