scroll-margin 是 CSS 属性，非 HTML 属性，须作用于启用了 scroll-snap 的子元素；需父容器设 overflow-y: auto 和 scroll-snap-type，子元素设 scroll-snap-align，且方向匹配才生效。
scroll-margin 不是 HTML 属性，不能写在 <div scroll-margin="20px"> 这类标签里——浏览器直接忽略，完全无效。
scroll-margin 必须写在 CSS 里，且只对 scroll-snap 子元素生效
它不是给滚动容器（比如 body 或 div）加的，而是加在「要被滚动到的那个元素」上。但前提是这个元素必须处于一个启用了 scroll-snap-type 的滚动上下文中。
- 父容器需有
overflow-y: auto（或scroll），且内容高度超出容器 - 父容器必须设置
scroll-snap-type: y mandatory（或proximity） - 目标子元素必须设置
scroll-snap-align: start（或其他合法值） - 只有这时，给该子元素加
scroll-margin-top: 60px才会真正让滚动停止位置上移 60px
scroll-margin-top 被忽略？先检查 scroll-snap-align 是否匹配方向
比如你写了 scroll-margin-top: 80px，但滚动后没偏移，大概率是因为 scroll-snap-align 没生效，或者对齐方向不匹配：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
scroll-snap-align: start→scroll-margin-top生效（作用于块起始边） -
scroll-snap-align: end→scroll-margin-bottom才生效 -
scroll-snap-align: center→scroll-margin-block（或scroll-margin四值语法）才参与计算 - 如果父容器设了
direction: rtl或writing-mode: vertical-rl，start可能指向右或下，scroll-margin-top就会“失联”
固定导航栏遮挡？别在 body 上乱设 scroll-margin
很多人想解决导航栏遮挡问题，就给 body 或 html 加 scroll-margin-top，这是错的——scroll-margin 只能作用于 scroll-snap 子元素，不能作用于滚动容器本身。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给每个锚点目标元素（如
<section id="about">）加scroll-margin-top: 80px - 同时确保它的父滚动容器（通常是
body或一个自定义div）设置了scroll-snap-type: y mandatory - 注意：
html元素默认不支持scroll-snap-type，部分浏览器会静默忽略；推荐用一个包裹div作为滚动容器更可靠 - 如果用的是原生锚点跳转（
#about），还要配scroll-behavior: smooth在html或滚动容器上
最容易被忽略的一点：scroll-margin 的偏移效果只在 scroll-snap 触发时才计算，它不会影响 scrollIntoView() 或 JS 手动滚动——除非你把那个元素也纳入同一个 scroll-snap 流程中。
