支持滚动吸附的可滚动容器中Safari的element.scrollTo平滑滚动失效

问题核心原因及解决方法 #

1. 偏移量计算不符合Safari规则

你当前用的offsetLeft在Safari中是相对于最近的非static定位祖先元素计算的，如果你的滚动容器没有显式设置position: relative，会导致计算出的偏移值错误，滚动行为异常。
修正方案：

• 先给滚动容器.h添加position: relative属性
• 改用getBoundingClientRect计算精准偏移量，代码示例：

document.querySelector(".js-h-slide").addEventListener("click", (e) => {
  const container = document.querySelector(".js-h-slides");
  const element = document.getElementById("h-image-5");
  // 计算相对于滚动容器的准确左偏移
  const targetLeft = element.getBoundingClientRect().left - container.getBoundingClientRect().left + container.scrollLeft;
  container.scrollTo({
    left: targetLeft,
    behavior: "smooth"
  })
});

2. scroll-snap与scrollTo平滑行为的Safari实现冲突

Safari对同时开启滚动吸附的容器调用scrollTo指定behavior: smooth存在原生bug，会优先触发吸附逻辑直接跳过平滑动画。
推荐两种修复方案，按需选择：

方案1：滚动时临时禁用scroll-snap，结束后恢复

document.querySelector(".js-h-slide").addEventListener("click", (e) => {
  const container = document.querySelector(".js-h-slides");
  const element = document.getElementById("h-image-5");
  const targetLeft = element.getBoundingClientRect().left - container.getBoundingClientRect().left + container.scrollLeft;
  // 临时关闭滚动吸附
  container.style.scrollSnapType = 'none';
  // 执行平滑滚动
  container.scrollTo({
    left: targetLeft,
    behavior: "smooth"
  })
  // 滚动结束后恢复吸附
  const restoreSnap = () => {
    container.style.scrollSnapType = 'x mandatory';
    container.removeEventListener('scrollend', restoreSnap);
  }
  container.addEventListener('scrollend', restoreSnap);
});

方案2：改用scrollIntoView方法（更简洁）

该方法在Safari中与滚动吸附的兼容性更好，不需要手动计算偏移量：

document.querySelector(".js-h-slide").addEventListener("click", (e) => {
  const element = document.getElementById("h-image-5");
  element.scrollIntoView({
    behavior: 'smooth',
    inline: 'start', // 匹配你设置的scroll-snap-align: start对齐规则
    block: 'nearest' // 垂直方向不滚动
  })
});

3. 可选排查项

可以尝试移除-webkit-overflow-scrolling: touch测试，部分版本的Safari中该属性会和平滑滚动逻辑冲突，确认问题来源后再决定是否保留。

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