Question

我编写了一个jquery函数，每次调整页面大小或加载页面时都会将未知宽度的内联块元素居中。它通过计算元素的宽度，然后获取页面的宽度，并将元素的左边距设置为页面宽度 - 元素宽度/ 2来实现。这是有效的，除非通过按下页面调整页面大小顶部的按钮或切换全屏的浏览器。

我无法想到为什么这不起作用，但是当页面以这种方式调整大小时，似乎页面没有重置左边距。有办法解决这个问题吗？

这是代码。

$.fn.center = function() {

    this.each(function() {
        $(this).css("display", "inline-block");

        var pageWidth = $(window).width();
        var elementWidth = $(this).width();

        if ((pageWidth - elementWidth) > 0) {
            $(this).css("margin-left", ((pageWidth - elementWidth) / 2) + "px");
        }
    });

    return this;
};

在document.ready（），window.load（）和window.resize（）上调用它。

以下是正确行为的屏幕截图。

enter image description here

同样，这可以在页面加载时以及通过句柄调整大小时起作用。

以下是通过浏览器中的切换全屏按钮调整页面大小时发生的不正当行为。

enter image description here

任何人都知道如何解决这种问题？

非常感谢！

编辑：我认为这是我的调整大小功能的问题。页面正在注册它已被调整大小但元素没有正确居中，除非通过拖动句柄调整页面大小。我想知道为什么当页面切换时它不起作用......

Answer 1

$(window).resize(function() { 
   console.log('resize!');
});

您使用的是哪个jQuery和浏览器？

如果您正在使用Firefix，我认为可能需要更多时间来实现调整大小。因此，在超时后解析或触发脚本可以解决问题吗？

去抖动示例： http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

或者您可以尝试这样的事情：

$(window).resize(function() {
  console.log('resize');
  setTimeout(function() {
    console.log('later resizing');
  }, 150);
});

这可能取决于你的firefox版本。也许这个问题与该主题有关，应该与计时器一起使用？你剪断了在FF22

的工作正常

按钮调整浏览器时居中不起作用的功能

1 个答案: