1. 前言

在 PC 及 Android 上测试 body.scrollTo({ top: 100, left: 0, behavior: "smooth" }),页面均可以平滑滚动到指定位置,但 iOS 上不行,会瞬间滚动到指定位置。基本肯定又是令人头疼的兼容性问题了,查询了 相关文档,说是 iOS Safari 默认不支持 scroll-behavior 属性。

2. 解决方法

检查浏览器是否支持平滑滚动,可以用如下 JavaScript 代码:

console.log('scrollBehavior' in document.documentElement.style)

2.1 方案一

使用对应的 polyfill,例如:scroll-polyfill。基本原理就是自定义滚动函数,检测到原生不支持时改用或者干脆直接替换为该函数。

2.2 方案二

开启 iOS 原生支持。经测试,iOS 上所有浏览器都不支持平滑滚动,只要在「设置」-「Safari浏览器」-「高级」-「Experimental Features」中启用「CSSOM View Smooth Scrolling」选项即可原生支持。