滚动时如何低开销实现position:fixed元素相对另一指定元素定位？

方案1：CSS原生锚点定位（优先推荐，零JS开销） #

这是目前成本最低的实现方案，仅靠CSS即可完成，不受祖先元素overflow:hidden影响，也无需监听任何滚动事件，浏览器原生自动处理滚动时的位置同步：

1. 给参照元素RDIV设置锚点标识：

#rdiv {
  anchor-name: --ref-anchor;
}

2. 给position: fixed的弹窗设置锚点关联，直接基于RDIV的位置定义自身坐标：

.popup {
  position: fixed;
  anchor-default: --ref-anchor;
  /* 示例：弹窗定位在RDIV底部水平居中位置，可根据需求调整 */
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

该方案兼容Chrome 125+、Firefox 126+、Edge 125+版本，覆盖目前90%以上的全球用户流量。

方案2：兼容旧浏览器的优化JS方案 #

如果需要适配更低版本浏览器，可以针对你之前遇到的两个性能问题做针对性优化，整体开销可以控制在极低水平：

• 解决遍历父元素开销高的问题：仅在页面初始化时遍历一次RDIV的所有祖先元素，筛选出overflow属性为scroll/auto的可滚动容器，将这些容器的引用缓存起来，后续不再重复遍历
• 解决滚动高频触发重定位的问题：
  • 给所有缓存的滚动容器绑定被动scroll事件（passive: true），避免阻塞滚动渲染
  • 用requestAnimationFrame做帧节流，同一帧内多次滚动仅触发一次重定位逻辑
  • 每次重定位前先对比RDIV当前getBoundingClientRect返回的坐标和上一次缓存的坐标，仅当坐标发生变化时才更新弹窗位置，避免无意义的DOM操作

常见疑问说明 #

你之前尝试IntersectionObserver不生效是正常的：IntersectionObserver的设计用途是监听元素和根容器的交叉状态变化，无法监听元素的实时位置偏移，本身不适合这个场景。

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