iOS端Chrome浏览器中scrollIntoView函数无法生效的原因排查

点击筛选链接nav .fixed a时，预期通过scrollIntoView滚动到内容区域#category-content顶部，但各浏览器表现不一致：

• macOS系统：Firefox ✅、Safari ✅、Chrome ✅
• iOS系统：Firefox ✅、Safari ✅、Chrome ❌

iOS端Chrome中筛选功能正常，但页面无滚动效果。#category-content是body直接子元素，无额外CSS样式。已尝试更新浏览器、清除缓存、重启设备，控制台无报错，需排查是否存在代码问题或iOS端Chrome特殊机制。

HTML代码 #

<nav id="filters">
  <ul class="fixed">
    <li><a href="#" data-filter="all" class="active">All</a></li>
    <li><a href="#" data-filter="text-inputs">Text & Inputs</a></li>
    <li><a href="#" data-filter="controls">Controls</a></li>
    <li><a href="#" data-filter="scrolly-stuff">Scrolly Stuff</a></li>
    <li><a href="#" data-filter="other">Other</a></li>
  </ul>
</nav>


<div id="category-content">
   <!-- Content -->
</div>

JS代码 #

document.querySelectorAll('nav .fixed a').forEach(navLink => {
  navLink.addEventListener('click', (event) => {
    // Get the element
    const categoryContent = document.getElementById('category-content');
      // Scroll to the element
      categoryContent.scrollIntoView();
  });
});

可能的原因及修复方案 #

1. 未阻止a标签默认行为 #

a标签的href="#"会触发默认锚点跳转，可能与scrollIntoView的行为冲突，尤其iOS端Chrome的事件处理优先级特殊。

修复代码：

document.querySelectorAll('nav .fixed a').forEach(navLink => {
  navLink.addEventListener('click', (event) => {
    event.preventDefault(); // 阻止默认跳转行为
    const categoryContent = document.getElementById('category-content');
    categoryContent.scrollIntoView({ block: 'start', behavior: 'smooth' }); // 显式指定滚动位置与行为
  });
});

2. 切换滚动上下文 #

iOS端Chrome可能对元素滚动的上下文解析存在差异，直接操作window滚动可绕过此问题：

替代方案：

document.querySelectorAll('nav .fixed a').forEach(navLink => {
  navLink.addEventListener('click', (event) => {
    event.preventDefault();
    const targetTop = document.getElementById('category-content').offsetTop;
    window.scrollTo({
      top: targetTop,
      behavior: 'smooth' // 可选，保留平滑滚动效果
    });
  });
});

3. 显式指定scrollIntoView参数 #

部分浏览器对scrollIntoView的默认参数解析不一致，显式声明block: 'start'确保滚动到元素顶部：

categoryContent.scrollIntoView({ block: 'start', inline: 'nearest' });

4. 延迟执行滚动（极端场景） #

若存在事件时序冲突，可通过setTimeout延迟执行滚动：

setTimeout(() => {
  categoryContent.scrollIntoView({ block: 'start' });
}, 0);

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