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);
   });
);

它的基础是你需要挂钩到window.onresize事件并进行适当的计算和操作 - 我们实际上只需要计算innerWidth和lastWidth一次，然后每次调整大小 - gap和scrollingWidth。

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

希望这有帮助。

Answer 2

将您现有的代码放入函数setupTable()，当第一次加载页面时执行setupTable()。

为了确保每次浏览器窗口大小发生变化时您的表都会更新，您需要将setupTable()函数绑定到“resize”事件。

$(function() {
    // called when page is loaded
    setupTable();

    // triggered when the size of the browser window changes
    $(window).on("resize", setupTable);

    function setupTable(){
        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);   
    }


});

响应性差距问题

2 个答案: