Safari浏览器中页面上滑动画失效问题求助

我之前也碰到过类似的Safari滚动异常问题，大概率是浏览器对滚动事件、scrollTo API的兼容性差异，或是DOM更新时的滚动位置计算偏差在搞鬼！咱们一步步来排查修复：

一、先定位触发回滚的核心代码 #

先找到项目里处理滚动逻辑的JS部分——这类展开式演示通常会有：

• 监听scroll事件的代码块
• 调用window.scrollTo/element.scrollTop的逻辑（比如展开内容时自动滚动到对应区域）
• 动态修改DOM（展开/折叠内容）的相关函数

重点关注DOM更新后执行滚动的代码，这是Safari最容易出问题的环节。

二、针对性修复方案 #

1. 统一滚动位置的获取方式 #

Safari对document.documentElement.scrollTop和document.body.scrollTop的处理和Chrome/Firefox不一致，建议改用标准的window.pageYOffset来获取当前滚动位置，所有现代浏览器（包括Safari）都支持这个属性：

// 替换原来的 scrollTop 获取逻辑
const currentScroll = window.pageYOffset;

2. 修复DOM更新后的滚动偏差 #

当展开内容时，DOM结构变化会导致页面高度重新计算，Safari可能会因此重置滚动位置。可以在DOM更新前后手动保存并恢复滚动位置：

function expandProjectSection(section) {
  // 1. 先保存当前滚动位置
  const savedScroll = window.pageYOffset;
  
  // 2. 执行展开内容的DOM操作
  section.classList.add('is-expanded');
  // ...其他展开逻辑
  
  // 3. 用requestAnimationFrame确保DOM更新完成后再调整滚动
  requestAnimationFrame(() => {
    // 如果目标位置和当前滚动差不大，就不执行滚动（避免不必要的跳动）
    if (Math.abs(section.offsetTop - savedScroll) > 15) {
      window.scrollTo({
        top: section.offsetTop,
        behavior: 'auto' // 先关闭平滑滚动测试，Safari旧版本对smooth支持有问题
      });
    }
  });
}

3. 检查scroll-behavior的兼容性 #

如果项目里用了CSS的scroll-behavior: smooth或者JS里的behavior: 'smooth'，Safari旧版本可能会出现滚动异常。如果需要保留平滑滚动，可以引入smoothscroll-polyfill来兼容，或者暂时换成behavior: 'auto'测试是否解决问题。

4. 排查容器的overflow和position属性 #

检查页面中是否有设置了overflow: auto或position: fixed的容器，这类元素在Safari中可能会干扰全局滚动。比如固定导航栏的偏移量计算错误，也可能导致滚动时的异常跳转。

三、验证与调试 #

如果修复后还是有问题，可以在滚动事件里加日志，追踪滚动位置的变化：

window.addEventListener('scroll', () => {
  console.log('当前滚动位置:', window.pageYOffset);
});

观察日志里什么时候滚动位置突然跳回0，就能精准定位到触发异常的代码块。

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