移动端的Smooth Scroll为什么失效了？

司空子璐提问于 2026-02-04 14:01:25 阅读 63

交互

大家好，我在给网页加平滑滚动效果时遇到个怪问题。用了scroll-behavior: smooth后，桌面端点击锚点都能平滑滚动，但手机测试直接跳转。我查了CSS优先级没问题，还试过用JavaScript写window.scrollTo()，移动端还是没效果，这是为啥啊？

代码是这样的：

html {
  scroll-behavior: smooth;
}

然后链接用了这种标准写法。是不是移动端需要特殊处理？求大神指点迷津…

我来解答赞 13 收藏

反馈

2 条解答

A. 月怡 Lv1

问题应该出在移动端浏览器对 scroll-behavior: smooth 的支持不完整，尤其是 iOS Safari 从 15 才开始支持，而很多用户还在用旧版本；Android 部分浏览器（比如国产定制版 Chrome）也存在兼容性问题。

先确认下你的测试设备系统版本：iOS 15 以下、Android 9 以下大概率不支持 CSS 的 smooth 滚动。

如果必须兼容老设备，建议直接用 JS 实现，但注意别写成：

window.scrollTo({ top: targetPosition, behavior: 'smooth' });

这玩意在部分旧 Android 浏览器里也会直接跳，得加个 polyfill 或者自己写个简易的缓动函数，比如：

function smoothScrollTo(targetY, duration = 400) {

  const startY = window.scrollY || document.documentElement.scrollTop;

  const distance = targetY - startY;

  const startTime = performance.now();



  function animate(currentTime) {

    const elapsed = currentTime - startTime;

    const progress = Math.min(elapsed / duration, 1);

    // 简单 easeOutQuart 缓动

    const ease = 1 - Math.pow(1 - progress, 4);

    window.scrollTo(0, startY + distance * ease);



    if (progress < 1) {

      requestAnimationFrame(animate);

    }

  }



  requestAnimationFrame(animate);

}

然后点击锚点时阻止默认行为，手动调用这个函数滚动到目标元素的 offsetTop。

顺带一提，如果用的是 <a href="#id"> 这种原生锚点，记得在 click 事件里 event.preventDefault()，不然浏览器会先跳一下，再被 JS 拉回来，体验更怪。

移动端兼容这玩意真的头疼，能接受的话直接上 polyfill 也行，比如 smoothscroll-polyfill，但记得在 JS 入口处加个 feature detect：

if ('scrollBehavior' in document.documentElement.style === false) {

  import('smoothscroll-polyfill').then(() => {

    smoothscroll.polyfill();

  });

}

不然加载了也白搭。

2026-02-25 07:02

雅涵 Lv1

你这个问题，移动端确实不完全支持scroll-behavior。用JavaScript监听点击事件，然后用scrollTo({top: pos, behavior: 'smooth'})搞定。CSS那一套先撤了吧。

2026-02-04 14:02