Safari 15.4设置scroll-behavior:smooth后滚动功能完全失效的问题排查与解决方案咨询

这绝对是Safari 15.4版本的一个已知兼容性Bug，你的操作本身没有任何问题——咱们来拆解下问题根源和可行的修复方案：

问题根源 #

当滚动容器同时设置了overflow: hidden和scroll-behavior: smooth时，Safari 15.4在处理JavaScript直接修改scrollLeft的逻辑时会出现阻塞冲突：其他浏览器要么正常兼容平滑滚动与JS滚动，要么直接忽略scroll-behavior fallback到即时滚动，但不会完全锁死滚动功能。这个问题属于Safari特定版本的实现缺陷，并非你的代码逻辑错误。

可行的规避方案 #

方案1：动态切换scroll-behavior样式 #

在触发JS滚动前临时关闭平滑滚动，滚动完成后再恢复，既不影响其他浏览器的平滑体验，又能避开Safari的Bug：

const scrollContainer = document.querySelector('.your-scroll-container');

// 触发滚动的按钮点击事件
document.querySelector('.scroll-btn').addEventListener('click', () => {
  // 临时禁用平滑滚动
  scrollContainer.style.scrollBehavior = 'auto';
  // 执行滚动操作
  scrollContainer.scrollLeft += 50;
  // 滚动完成后恢复平滑滚动（用requestAnimationFrame确保时机正确）
  requestAnimationFrame(() => {
    scrollContainer.style.scrollBehavior = 'smooth';
  });
});

方案2：使用原生平滑滚动API替代直接修改scrollLeft #

改用Element.scrollBy()方法并指定平滑行为，这个API在Safari 15.4中能正常工作，且代码更简洁：

document.querySelector('.scroll-btn').addEventListener('click', () => {
  document.querySelector('.your-scroll-container').scrollBy({
    left: 50,
    behavior: 'smooth'
  });
});

如果需要兼容更老的浏览器，可以添加降级判断，但针对你的场景，这个API在问题涉及的浏览器版本中是完全兼容的。

方案3：通过CSS特性检测禁用Safari的平滑滚动 #

用CSS特性检测精准命中存在Bug的Safari版本，直接不给它设置平滑滚动：

.your-scroll-container {
  overflow: hidden;
  white-space: nowrap;
  /* 默认启用平滑滚动 */
  scroll-behavior: smooth;
}

/* 针对Safari 15.4的特性检测，禁用平滑滚动 */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .your-scroll-container {
    scroll-behavior: auto;
  }
}

这种方式比UA字符串检测更可靠，不会误判其他浏览器或Safari的其他版本。

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