React中Bootstrap 5.2.2 Scrollspy安卓移动端激活链接失效问题

以下是针对性的排查方向和解决步骤：

1. 确认Scrollspy初始化时机与React生命周期匹配 #

React组件渲染是异步的，若在组件未完全挂载时初始化Scrollspy，会导致安卓端无法正确监听滚动状态。需在组件挂载完成后初始化，并在内容更新时重新刷新：

import { useEffect } from 'react';

function Layout() {
  useEffect(() => {
    // 初始化Scrollspy
    const scrollSpy = new window.bootstrap.ScrollSpy(document.body, {
      target: '#navbar', // 替换为你的导航栏ID
      offset: 80 // 适配固定导航栏高度，安卓端可能需要调整
    });

    // 组件卸载时销毁实例，避免内存泄漏
    return () => scrollSpy.dispose();
  }, [/* 若有动态加载的内容，添加对应状态作为依赖 */]);

  return (
    // 页面结构
  );
}

2. 修复安卓滚动事件触发延迟问题 #

部分安卓原生浏览器/旧版Chrome对scroll事件触发不敏感，可手动监听滚动并强制刷新Scrollspy：

useEffect(() => {
  const refreshScrollSpy = () => {
    const spyInstance = window.bootstrap.ScrollSpy.getInstance(document.body);
    if (spyInstance) spyInstance.refresh();
  };

  window.addEventListener('scroll', refreshScrollSpy, { passive: true });
  return () => window.removeEventListener('scroll', refreshScrollSpy);
}, []);

3. 检查容器与目标元素配置 #

• 确认滚动容器设置正确：若使用自定义滚动容器（而非document.body），需确保容器设置了position: relative和固定高度/溢出属性。
• 验证导航链接href与目标元素id完全匹配（大小写敏感），安卓端对ID匹配的容错性更低。

4. 排查平滑滚动冲突 #

若页面启用了scroll-behavior: smooth（CSS或JS实现），部分安卓浏览器会干扰Scrollspy的滚动位置检测，可暂时禁用该属性测试是否恢复正常。

5. 验证Bootstrap JS完整性 #

确保项目完整引入Bootstrap 5.2.2的JS文件，避免Tree Shaking误删Scrollspy相关模块。若使用CDN引入，检查安卓端是否能正常加载该资源。

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