scroll-snap-type卡顿主因是scroll-padding设置不当，如过大值、含env()的calc()计算或与scroll-margin混用，引发浏览器重排、吸附失效或回退普通滚动，需精准设置并规避兼容性陷阱。
scroll-snap-type 卡顿，八成不是性能问题，而是 scroll-padding 设置不当触发了浏览器的合成层重排或强制重计算，尤其在 Safari 和旧版 Android WebView 中表现明显。
scroll-padding 过大导致吸附延迟或跳帧
过大的 scroll-padding（比如 scroll-padding: 100px）会让浏览器在每次滚动结束前反复估算“最近吸附点”，尤其在 mandatory 模式下，可能引发多次 layout 回溯。
- 移动端 Safari 对 >40px 的
scroll-padding响应变慢，首次滑动常出现 100–200ms 滞后 - Android WebView（11–12）在
scroll-padding-top含calc()时，若结果超过容器内边距实际可用空间，会退化为 fallback 惯性滚动，失去吸附 - 推荐值：垂直滚动用
scroll-padding-top: 64px（固定导航栏高度），横向轮播用scroll-padding-left: 20px；避免无依据地设为50vh或百分比
scroll-padding + env(safe-area-inset-top) 在 Safari 首次失效
Safari 15.4–16.3 存在已知 bug：scroll-padding-top: calc(64px + env(safe-area-inset-top)) 在页面首次加载后锚点跳转或 touch 滚动时，env() 不参与计算，导致顶部偏移缺失、标题被遮挡——但 resize 或手动 scroll 一次后即恢复正常。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 临时绕过：改用 JS 动态写入，例如
document.documentElement.style.scrollPaddingTop = `calc(64px + ${window.visualViewport?.height ? window.innerHeight - window.visualViewport.height : 0}px)` - 更稳妥：降级为固定值
scroll-padding-top: 64px，再用@supports (padding-top: env(safe-area-inset-top))单独覆盖刘海屏设备 - 注意：Firefox 不支持
scroll-padding-block等逻辑属性缩写，必须拆成scroll-padding-top/scroll-padding-bottom
scroll-padding 与 scroll-margin 混用引发吸附冲突
当同时设置 scroll-padding-top: 64px 和子项 scroll-margin-top: 20px，浏览器需叠加两次偏移计算，部分内核（如 Samsung Internet 17.0）会将二者相加后超出容器边界，直接放弃吸附逻辑，回退为普通滚动。
立即学习“前端免费学习笔记（深入）”；
- 原则：优先用
scroll-padding控制容器级偏移（适用于全局导航栏），仅在个别元素需微调时才加scroll-margin - 避免嵌套偏移：不要给滚动容器设
scroll-padding，又给其子项父 wrapper 设padding-top，这会导致视觉偏移 ×2 - 调试技巧：在 DevTools 中临时禁用
scroll-padding，观察吸附是否恢复流畅——若恢复，基本可锁定是 padding 值或计算式的问题
真正卡顿往往藏在看似无害的 calc() 里：Safari 对含 env() 的动态计算缓存不友好，Firefox 对逻辑属性缩写不识别，而安卓 WebView 则对过大的 padding 值直接弃疗。别迷信“设得越大越保险”，精准比宽松更重要。
