手风琴组件滚动异常：点击激活项后页面位置偏移

这个问题我之前也碰到过——本质是浏览器的滚动锚定行为在作祟：当手风琴面板收缩导致页面总高度突然降低时，浏览器会自动调整滚动位置，试图让当前视野内的内容保持“相对位置”，结果反而导致页面跳到了错误的位置。

下面给你几个实用的解决方案，按实现复杂度从低到高排序：

方案1：禁用浏览器滚动锚定（最简单） #

直接给页面的滚动容器（一般是body或html）添加CSS属性，禁用自动滚动锚定：

body {
  overflow-anchor: none;
}

这个属性会告诉浏览器：不要因为页面元素高度变化而自动调整滚动位置。现代浏览器（Chrome、Firefox、Edge等）都支持，代码量最小，优先试试这个。

方案2：手动控制滚动位置（兼容性最好） #

如果需要兼容旧版浏览器，或者禁用滚动锚定不符合你的需求，可以通过JavaScript手动记录并恢复滚动位置：

// 假设你的菜单图片都有.accordion-menu-img类
document.querySelectorAll('.accordion-menu-img').forEach(img => {
  img.addEventListener('click', function() {
    // 1. 点击瞬间记录当前滚动位置
    const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
    
    // 2. 执行你的手风琴切换逻辑（关闭其他面板、展开当前面板）
    closeAllAccordionPanels(); // 替换成你实际关闭面板的函数
    openTargetPanel(this); // 替换成你实际展开当前面板的函数
    
    // 3. 等待面板切换动画完成（如果有CSS transition的话）
    // 这里的300ms要和你CSS里的transition-duration保持一致
    setTimeout(() => {
      // 恢复之前记录的滚动位置
      window.scrollTo(0, currentScrollPos);
    }, 300);
  });
});

如果你的手风琴没有动画（瞬间展开/收缩），可以去掉setTimeout，直接在切换逻辑后执行window.scrollTo。

方案3：用占位元素维持页面高度（最精细） #

如果上面两种方法都有瑕疵，还可以用“占位元素”的思路：在收缩面板之前，先添加一个和面板高度相同的空元素，等面板完全收缩后再移除这个占位元素，让页面高度不会突然变化：

document.querySelectorAll('.accordion-menu-img').forEach(img => {
  img.addEventListener('click', function() {
    // 找到要收缩的面板（比如所有非当前面板）
    const panelsToClose = document.querySelectorAll('.accordion-panel:not(.active)');
    
    // 给每个要收缩的面板添加占位元素
    panelsToClose.forEach(panel => {
      const placeholder = document.createElement('div');
      placeholder.style.height = `${panel.offsetHeight}px`;
      placeholder.classList.add('panel-placeholder');
      panel.before(placeholder);
    });
    
    // 执行切换逻辑
    closeAllAccordionPanels();
    openTargetPanel(this);
    
    // 动画完成后移除占位元素
    setTimeout(() => {
      document.querySelectorAll('.panel-placeholder').forEach(el => el.remove());
    }, 300);
  });
});

这种方法能完全避免页面高度波动，适合对滚动体验要求极高的场景，但代码量稍大。

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