Bootstrap 5无jQuery实现激活手风琴滚动到顶部 移动端失效求助

失效原因排查 #

• 偏移量计算逻辑错误：原代码用acc.scrollTop + el.parentNode.offsetTop计算位置，offsetTop是相对于最近的定位父元素的值，若桌面端和移动端的页面布局、父元素定位属性不一致，会直接导致计算出的滚动目标值错误。
• 滚动对象匹配错误：若移动端页面存在自定义滚动容器（比如给<html>/<body>或某个父容器设置了overflow: auto/scroll），调用window.scrollTo不会生效，需要绑定对应滚动容器的滚动方法。
• 平滑滚动兼容性问题：部分低版本安卓内置浏览器对scrollTo的behavior: 'smooth'参数支持不完善，会触发无效果的情况。

可行解决方案 #

改用getBoundingClientRect()计算元素相对于视口的绝对位置，兼容不同布局场景，同时兼容普通窗口滚动和自定义容器滚动场景：

适配窗口滚动的代码（大部分场景适用） #

const accordionItems = document.querySelectorAll('.accordion-collapse')
const HEADER_OFFSET = 74 // 吸顶头部高度，可自行调整

accordionItems.forEach((el) => {
  el.addEventListener('shown.bs.collapse', (e) => {
    // 获取当前激活手风琴项的容器节点
    const activeItem = el.closest('.accordion-item')
    // 计算相对于视口的位置，叠加当前页面滚动量，减去头部偏移
    const scrollTarget = activeItem.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET
    
    window.scrollTo({
      top: scrollTarget,
      left: 0,
      // 若平滑滚动不生效可注释掉下面这行，改用默认瞬间滚动
      behavior: 'smooth'
    })
  })
})

自定义滚动容器适配（如果上述代码不生效可尝试） #

如果页面滚动容器不是window，而是指定的自定义元素，修改代码如下：

const accordionItems = document.querySelectorAll('.accordion-collapse')
const scrollContainer = document.querySelector('#你的滚动容器ID') // 替换为实际滚动容器选择器
const HEADER_OFFSET = 74

accordionItems.forEach((el) => {
  el.addEventListener('shown.bs.collapse', (e) => {
    const activeItem = el.closest('.accordion-item')
    const scrollTarget = activeItem.getBoundingClientRect().top + scrollContainer.scrollTop - HEADER_OFFSET
    
    scrollContainer.scrollTo({
      top: scrollTarget,
      left: 0,
      behavior: 'smooth'
    })
  })
})

验证步骤 #

1. 先注释掉behavior: 'smooth'参数，测试是否有滚动效果，排除平滑滚动兼容性问题。
2. 打开移动端开发者工具，在事件回调中打印scrollTarget的值，确认计算结果是否符合预期。
3. 检查<html>和<body>标签是否设置了overflow-x: hidden之外的overflow属性，若有则删除或使用自定义滚动容器方案。

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