overflow: scroll 时不能平滑滚动的问题及解决

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

补充：

  • -webkit-overflow-scrolling: touch 是 iOS Safari 的私有属性，开启"momentum-based scrolling"（惯性滚动），让长列表/长页面滑动更顺滑；现代 iOS Safari 已不再需要，未识别的值会被忽略。
  • 在 macOS Safari 上此属性仍可作为兼容回退使用；其它浏览器（Chrome、Firefox、Android）没有此问题，原生滚动本身已足够流畅。
  • 真要彻底解决移动端滚动卡顿，推荐：
    • 避免在滚动容器内使用复杂的 box-shadow、filter、background-attachment: fixed 等耗性能属性；
    • 容器开启 GPU 合成（如 will-change: transform 或 transform: translateZ(0)），但要避免滥用；
    • 使用 overflow-anchor 等新特性或第三方虚拟滚动库（虚拟列表）应对长列表。