CSS scroll-behavior：平滑滚动与可访问性实践

---

title: CSS scroll-behavior：平滑滚动与可访问性实践

keywords:

• scroll-behavior
• smooth
• 锚点滚动
• 可访问性
• 降级策略

description: 使用 scroll-behavior: smooth 提供平滑滚动体验，结合动效偏好与锚点控制，保证可访问性与性能。

categories:

• 文章资讯
• 编程技术

---

概述

scroll-behavior 控制滚动动画，smooth 提供平滑效果。需结合 prefers-reduced-motion 与锚点控制，避免晕动与性能问题。

用法/示例

html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

工程建议

• 对长页面与弱设备谨慎启用全局平滑滚动，必要时局部应用。
• 与 scroll-margin/scroll-padding 协作保证定位稳定；测试键盘与辅助技术行为。
• 在脚本滚动中提供回退与节流，避免过度动画引发卡顿。

参考与验证

• MDN：scroll-behavior — https://developer.mozilla.org/docs/Web/CSS/scroll-behavior
• web.dev：Scroll behavior — https://web.dev/articles/smooth-scrolling