手风琴组件关闭已展开面板后滚动至顶部的跨浏览器问题

我之前也碰到过一模一样的跨浏览器滚动bug，尤其是Safari/iOS和Firefox里这种点击手风琴面板后页面莫名往上跳的情况，大概率是浏览器的默认焦点行为或者元素尺寸变化触发了自动滚动逻辑——Chrome在这方面的处理更宽松，所以没出现问题。

问题根源分析 #

当你切换手风琴面板时，展开/收起的div会改变页面整体布局，Safari和Firefox会自动尝试将获得焦点的元素保持在视口内，或者在布局重排后重新计算滚动位置，这就导致了不必要的向上滚动。另外，如果你的列表项在点击后默认获得焦点，浏览器的滚动机制会强制把焦点元素拉到视口顶部附近。

具体解决方案 #

下面几个方案都是我实际测试有效的，你可以根据自己的手风琴实现逻辑选择：

1. 阻止焦点触发的自动滚动

在点击事件里手动阻止浏览器默认行为，或者避免列表项自动获得焦点：

// 假设你的手风琴列表项类名为accordion-item
document.querySelectorAll('.accordion-item').forEach(item => {
  item.addEventListener('click', function(e) {
    // 阻止默认焦点行为，避免触发滚动
    e.preventDefault();
    // 执行你的手风琴展开/收起逻辑
    toggleAccordionPanel(this);
    // 如果需要保持交互性，手动移除焦点
    this.blur();
  });
});

function toggleAccordionPanel(item) {
  // 关闭所有已展开的面板
  document.querySelectorAll('.accordion-panel.active').forEach(panel => {
    panel.classList.remove('active');
  });
  // 切换当前面板的显示状态
  const targetPanel = item.nextElementSibling;
  targetPanel.classList.toggle('active');
}

另外，也可以给列表项添加tabindex="-1"属性，让它不会自动获得焦点，从根源上避免滚动触发。

2. 记录并恢复滚动位置

在面板切换前先保存当前滚动位置，布局更新后再强制恢复：

function toggleAccordionPanel(item) {
  // 记录当前页面滚动位置
  const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
  
  // 执行面板关闭/展开逻辑
  document.querySelectorAll('.accordion-panel.active').forEach(panel => {
    panel.classList.remove('active');
  });
  const targetPanel = item.nextElementSibling;
  targetPanel.classList.toggle('active');
  
  // 强制恢复之前的滚动位置
  window.scrollTo(0, currentScrollPos);
}

这种方法适合布局变化较大的场景，能精准保持用户的浏览位置。

3. 用CSS禁用自动滚动锚定

针对Safari的特殊处理，可以给手风琴容器添加CSS属性，阻止浏览器的滚动锚定行为：

.accordion-container {
  overflow-anchor: none;
}

overflow-anchor是浏览器用来稳定滚动的属性，禁用它可以避免浏览器因为元素尺寸变化而自动调整滚动位置。

验证建议 #

你可以先尝试第一种方案，大部分情况下都能解决问题；如果还是有滚动偏移，再结合第二种方案强制恢复位置。测试的时候记得在Safari/iOS和Firefox里分别验证，确保Chrome的正常表现不受影响。

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