带有滚动条

时间:2015-12-04 00:32:12

标签: javascript jquery css clusterize

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

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

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

http://output.jsbin.com/wekafiq

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

enter image description here

enter image description here

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

1 个答案:

答案 0 :(得分: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));