javascript - 响应差距问题

Question

我今天发现了一个与我元素所需类似的问题:Div Table with fixed right column .

这是已经存在的 jquery:

$(function() {
  var scrollingWidth = $('.table').innerWidth();
  var lastWidth = $('.table .wrap .column:last').outerWidth();
  var innerWidth = 0;
  $('.table .column').each(function() {
     innerWidth += $(this).outerWidth();
  });
  var gap = scrollingWidth - innerWidth + lastWidth;
  if(gap > lastWidth) {
    $('.table .wrap .column:last').css('width', gap);
    innerWidth += gap - lastWidth;
  }
  $('.table .wrap2').css('width', innerWidth);
});

我还用所有代码制作了一个 JSfiddle:http://jsfiddle.net/U5Vn2/

那么，开始讨论这个问题:

如果您从不调整 .table 所在窗口的大小，则代码可以完美运行。但是尝试将窗口大小调整为比原来更大(无需再次点击运行)，然后代码就会中断。如果您确实点击了运行，那么它会以较大的尺寸运行(当然，除非您将其调整得更大)。

另一个问题是，如果必须出现滚动条，则 jQuery 生成的间隙应该变小。 (为了演示，调整窗口大小，即使它只是间隙空间，您也必须滚动)。这可以修复吗？

今天早上我一直在尝试让它响应更大的尺寸，但我不知道如何修复它。

感谢您的帮助!

Answer 1

这是我对该问题的解决方案:http://jsfiddle.net/znWAX/1/

$(function () {
   var gap, scrollingWidth, innerWidth = 0,
       lastWidth = $('.table .wrap .column:last').outerWidth();
   $('.table .column').each(function () {
       innerWidth += $(this).outerWidth();
   });

   function fixTableColumn() {
       scrollingWidth = $('.table').innerWidth();
       gap = scrollingWidth - innerWidth;
       if (gap > 0) {
           $('.table .wrap .column:last').css('width', gap + lastWidth);
       }
       $('.table .wrap2').css('width', innerWidth + Math.max(0, gap));
   }
   fixTableColumn();

   $(window).resize(function () {
       requestAnimationFrame(fixTableColumn);
   });
);

它的基础是，您需要 Hook window.onresize 事件并执行适当的计算和操作 - 我们实际上只需要计算 innerWidth 和 lastWidth 一次，并且然后在每次调整大小时 - gap 和 scrollingWidth。

requestAnimationFrame函数用于流体动画， 您可以在这里找到更多信息:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

希望这有帮助。