为何点击底部折叠面板后滚动跳转到最后一个CSS吸附元素？

我正在用SvelteKit开发项目，已确认该问题在原生JavaScript环境中也会出现，且已准备好最小复现示例。

问题详情 #

点击页面底部的折叠面板（accordion）项时，视口会跳转到最后一个CSS吸附元素。

测试步骤 #

• 使用基于Chromium内核的浏览器
• 拖动滚动条从顶部快速滑至底部
• 点击折叠面板项

此时视口会跳转到页面中最后一个设置了position: sticky的元素，该问题仅在Chromium内核浏览器中出现，Firefox浏览器无此问题。补充说明：已录制问题演示视频，可直观看到跳转现象。

解决方案 #

这个问题是Chromium内核浏览器在处理sticky元素与动态内容变化（比如折叠面板展开/收起改变高度）时的滚动行为bug。以下是几种可行的解决方法：

方法1：禁用滚动锚定行为 #

给包含sticky元素的容器添加overflow-anchor: none，直接禁用浏览器的滚动锚定特性，避免动态内容变化时错误锚定到sticky元素：

.sticky-element-container {
  overflow-anchor: none;
}

该方法代码侵入性最低，是优先推荐的解决方案。

方法2：手动维持滚动位置 #

在折叠面板的点击事件中，先记录当前滚动位置，操作完成后强制恢复该位置，抵消浏览器的自动滚动：

// 以Svelte的点击事件处理为例
function handleAccordionClick(e) {
  // 记录当前滚动位置
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  // 执行折叠面板展开/收起逻辑
  // ... 你的原有代码 ...
  // 恢复滚动位置
  window.scrollTo(0, currentScroll);
}

若默认行为干扰交互，可按需添加e.preventDefault()，但需确保不影响折叠面板的正常展开/收起。

方法3：延迟修正滚动位置 #

如果前两种方法无效，可在DOM更新完成后延迟修正滚动位置，等待浏览器重排结束：

function handleAccordionToggle() {
  // 执行折叠面板状态切换逻辑
  // ... 你的原有代码 ...
  // 延迟10ms恢复滚动位置，适配浏览器重排时机
  setTimeout(() => {
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    window.scrollTo(0, currentScroll);
  }, 10);
}

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