概述`scroll-behavior: smooth` 提供原生平滑滚动效果,适合锚点导航与页面跳转。需与 `prefers-reduced-motion` 协作,尊重用户降低动效的偏好。示例html { scroll-behavior: smooth } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } } 工程建议可访问性:为长滚动提供“返回顶部”与定位提示;避免过度动画造成不适。与锚点:结合 `scroll-margin/scroll-padding` 控制定位;处理固定头遮挡。兼容:在旧浏览器回退到 JS 实现;确保性能与节流。参考与验证MDN `scroll-behavior` 文档:https://developer.mozilla.org/docs/Web/CSS/scroll-behaviorweb.dev 动效与可访问指南:https://web.dev/articles/prefers-reduced-motion

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部
1.883075s