Scroll Snap导致锚点平滑滚动失效的兼容性问题如何解决

• 你当前设置的scroll-snap-type: y mandatory属于强制吸附模式，JS逐帧修改滚动位置的过程中，每一步都会触发吸附对齐逻辑，直接打断平滑滚动动画，导致桌面端动画卡顿异常
• iOS Safari的滚动逻辑运行在独立线程，和JS执行逻辑分离，强制吸附模式会直接拦截JS触发的滚动行为，导致锚点跳转完全失效

核心逻辑是平滑滚动触发时临时关闭Scroll Snap，滚动到目标位置后再恢复吸附能力，同时改用原生滚动API替代jQuery逐帧动画，适配浏览器原生滚动逻辑。

第一步：修改CSS，新增临时禁用Scroll Snap的类 #

html {
  grid-auto-flow: row;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  /* 补充iOS滚动适配 */
  -webkit-overflow-scrolling: touch;
}
/* 新增：滚动动画临时禁用snap的类 */
html.scroll-snap-disabled {
  scroll-snap-type: none;
}

section {
  min-height: 80vh;
  scroll-snap-align: start;
}

第二步：替换原有锚点跳转JS逻辑 #

$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  const targetEl = $($.attr(this, 'href'));
  if (!targetEl.length) return;
  
  const $html = $('html');
  // 先禁用scroll snap
  $html.addClass('scroll-snap-disabled');
  const targetTop = targetEl.offset().top;

  // 用原生scrollTo实现平滑滚动，适配浏览器原生逻辑
  window.scrollTo({
    top: targetTop,
    behavior: 'smooth'
  });

  // 滚动结束后恢复scroll snap，1000ms对应平滑滚动时长，可自行调整
  setTimeout(() => {
    $html.removeClass('scroll-snap-disabled');
  }, 1000);
});

如果需要兼容不支持scrollBehavior: 'smooth'的老旧浏览器，可保留jQuery animate逻辑，只要保留动画期间禁用Scroll Snap的逻辑即可：

var root = $('html, body');
$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  const targetEl = $($.attr(this, 'href'));
  if (!targetEl.length) return;
  
  const $html = $('html');
  $html.addClass('scroll-snap-disabled');

  root.animate({
    scrollTop: targetEl.offset().top
  }, 1000, () => {
    // 动画回调里恢复snap，比定时器更准确
    $html.removeClass('scroll-snap-disabled');
  });
});

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