jQuery - 使用 .offset 和 translateX 绕过导致随机空白的 css 包装器

Question

我有一个内容包装器设置为最大宽度 1280 和自动边距的页面。我正在尝试创建一个 jQuery 脚本，它调用所有类为“全宽”的 div，将它们的 css 宽度更改为窗口的全宽，并添加一个负的 translateX 值以使它们与窗口的左侧齐平.

该脚本在加载时完美运行，但偏移量在窗口调整大小时似乎没有正确更新。这会导致在“全 Angular ”div 的左侧或右侧出现随机数量的空白区域。

var responsive = function () {
var offset = $('.full-width').offset();
$('.full-width').css({
'width':($(window).width())+'px',
'transform': 'translateX(-' + offset.left + 'px)',
'-webkit-transform': 'translateX(-' + offset.left + 'px)',
'-moz-transform': 'translateX(-' + offset.left + 'px)',
'-ms-transform': 'translateX(-' + offset.left + 'px)'
});
};

$(document).ready(responsive);
$(window).resize(responsive);

Answer 1

jquery offset() 函数在计算偏移量时没有考虑转换，我相信这是你的问题(但没有 jsfiddle 或 codepen 我无法确定)。也许您想使用 position:relative 并设置选择器的左侧？我不确切知道你在做什么，但通常这可以完全在 CSS 中完成，你可能会使事情过于复杂(加上每次用户调整页面大小时调用多次调整大小函数会增加很多开销)使用 jQuery 进行响应式大小调整。