动态启用CSS Anchor Positioning时页面自动滚动的根本解决方法

嘿，我来帮你搞定这个烦人的自动滚动问题！

你遇到的页面莫名上下滚动的情况，其实是Chrome浏览器处理CSS锚点定位（Anchor Positioning）时的默认行为——当浏览器计算弹出层的位置时，会自动尝试滚动页面，确保锚点元素和弹出层都能完整显示在视口内。尤其是当你从底部按钮切换到顶部按钮时，浏览器误判了需要调整视口来适配新的锚点位置，就触发了不必要的滚动。

下面给你两个根本解决的方案，不用再靠保存和恢复scrollY这种临时手段啦：

方案1：用CSS属性直接禁用自动滚动 #

这是最贴合问题本质的解决办法，CSS锚点定位规范本身就提供了控制这个行为的属性。你只需要给弹出层的CSS添加position-try-options: no-scroll，明确告诉浏览器不要为了适配弹出层而滚动页面。

修改后的CSS代码：

.my-popover {
  position-anchor: --my-anchor;
  border: solid 1px black;
  background-color: cyan;
  position: absolute;
  position-area: span-right bottom;
  position-try-fallbacks: flip-block;
  position-try-options: no-scroll; /* 新增这一行，阻止自动滚动 */
}

方案2：调整锚点切换的DOM操作顺序（备选） #

如果上面的属性在某些特殊场景下不生效，你可以调整JavaScript里切换锚点的逻辑：先完全隐藏弹出层，再切换锚点元素，最后重新显示弹出层。这样浏览器在切换锚点时，因为弹出层处于隐藏状态，不会触发视口调整的滚动行为。

修改后的JavaScript代码：

function showPopOver(e) {
  const popover = document.querySelector(".my-popover");
  // 先隐藏弹出层，避免浏览器计算位置时触发滚动
  popover.style.display = "none";
  
  // 切换锚点元素
  document.querySelector(".my-anchor")?.classList.remove("my-anchor");
  e.target.classList.add("my-anchor");
  
  // 用requestAnimationFrame确保DOM更新后再显示弹出层
  requestAnimationFrame(() => {
    popover.style.display = "block";
  });
}

这两个方案都是从问题的根源入手：方案1直接通过CSS规范禁用了自动滚动行为，方案2则通过调整操作顺序避免触发浏览器的滚动逻辑，都比临时保存scrollY的方法更可靠。

备注：内容来源于stack exchange，提问作者Fushihara