页面resize时jQuery offset/position返回值异常致滚动失效求助

看来你被这个问题困扰好几周了，我来帮你拆解下问题的核心，以及你提到的规避方案为什么能生效，同时补充几个实用的替代方案。

问题复盘 #

你的场景是页面顶部有固定头部，在窗口resize时，用jQuery的offset()或position()获取元素位置会返回错误值，导致后续的滚动动画功能异常。只有当页面滚到顶部后再调整窗口，这两个方法才会正常工作。

你原本的核心代码是这样的：

// 初始用position()的版本
$.each(bodies,function(key,val){ val.scroll = ($("#main"+val.id).position().top-layout.header.height); });

// 尝试过的offset()版本
$.each(bodies,function(key,val){ val.scroll = ($("#main"+val.id).offset().top-layout.header.height); });

滚动执行的代码：

$("#viewport").animate({scrollTop:body.scroll},function(){ $("#headerText").html(body.name); });

为什么会出现这个问题？ #

这其实和浏览器的重排重绘时机以及固定定位元素的布局影响有关：

• 当页面不在顶部时，窗口resize会触发浏览器重新计算布局，但jQuery的offset()和position()内部的缓存机制或者浏览器的布局队列延迟，导致它们拿到的是resize前的旧位置数据。
• position()是相对于最近的定位父元素计算，offset()是相对于文档，但固定头部会改变页面的滚动上下文，在滚动状态下resize，浏览器的布局计算优先级可能没跟上，导致这两个方法返回值异常。

你用的规避方案为什么有效？ #

直接计算滚动位置而不依赖offset()/position()，相当于绕开了jQuery封装方法可能存在的延迟问题，直接基于布局的原始逻辑推导位置，自然能避免缓存或时机问题导致的错误。

补充几个可行的替代方案 #

如果你之后需要用到类似的位置计算，还可以试试这些方法：

• 用原生DOM API getBoundingClientRect()：这个方法能实时获取元素相对于视口的位置，结合window.scrollY就能算出相对于文档的位置，比jQuery的方法更及时：

  $.each(bodies, function(key, val) {
    const elem = $("#main"+val.id)[0];
    const rect = elem.getBoundingClientRect();
    val.scroll = rect.top + window.scrollY - layout.header.height;
  });
  

• 强制触发重绘后再计算：在resize事件里，先给目标元素触发一个无意义的样式变更（比如切换display），强制浏览器完成重排后再调用位置方法，不过这个方法可能有性能损耗，适合小范围场景：

  $(window).on('resize', function() {
    $.each(bodies, function(key, val) {
      const $elem = $("#main"+val.id);
      // 强制重绘
      $elem.css('display', 'none').css('display', 'block');
      val.scroll = $elem.offset().top - layout.header.height;
    });
  });
  

• 监听滚动事件同步位置：如果页面滚动频繁，可以在scroll事件里也同步更新元素的位置缓存，避免resize时依赖旧数据。

总结 #

这类布局相关的bug，大多和浏览器的重排重绘节奏有关，当封装好的库方法出现异常时，要么用更底层的原生API，要么绕开依赖位置计算的逻辑，往往能快速解决问题。

内容的提问来源于stack exchange，提问作者thenickman100