scroll-padding 在固定导航栏下跳转遮挡标题，因其默认作用于根容器且不自动补偿导航栏高度；需在滚动容器设 scroll-padding-top（如 calc(64px + env(safe-area-inset-top))），动态高度需 js 更新；可与 scroll-snap-type 共用但需注意 safari 优先级问题；safari 15.4+ 存 calc+env 首次失效 bug，firefox 不支持逻辑属性缩写。
Scroll-padding 为什么在固定导航栏下跳转会遮挡标题
因为 scroll-padding 默认作用于根滚动容器（document.documentElement），而固定定位的导航栏（position: fixed; top: 0）会覆盖页面顶部内容，导致锚点跳转后标题被遮住。浏览器按元素真实位置滚动，不自动考虑视觉偏移。
解决核心是：让滚动目标“感知”导航栏高度，把目标元素向上多留出一段空白。
-
scroll-padding-top必须设在滚动容器上（通常是html或带overflow-y: auto的父容器），不能写在目标元素上 - 值推荐用
env(safe-area-inset-top)+ 导航栏高度，例如scroll-padding-top: calc(64px + env(safe-area-inset-top)) - 若导航栏高度不固定（如响应式变化），需配合 JS 动态更新
style.scrollPaddingTop，纯 CSS 无法响应高度变化
Scroll-snap-type 与 scroll-padding 能否一起用
能，但必须注意作用层级和触发条件：scroll-snap-type 控制的是容器级“吸附行为”，而 scroll-padding 是“锚点对齐时的内边距补偿”，两者不冲突，但生效前提不同。
-
scroll-snap-type: y mandatory必须设在**有滚动行为的容器**上（比如main或自定义div[role="region"]），不是设在html上 - 如果同时用了锚点跳转（
href="#section1"）和scroll-snap-type，部分浏览器（如 Safari）可能优先执行 snap，忽略 padding 偏移 —— 这是已知渲染优先级问题 - 稳妥做法：禁用 snap 的自动吸附（改用
proximity），或在跳转后用scrollIntoView({ block: 'start', behavior: 'smooth' })手动控制，绕过 snap 干预
兼容性配置：Chrome/Firefox/Safari 的 scroll-padding 差异
scroll-padding 在 Chrome 89+、Firefox 99+、Safari 15.4+ 支持良好，但 Safari 对 env(safe-area-inset-top) 和动态计算的支持更敏感。
- Safari 15.4–16.3 存在 bug：当
scroll-padding-top含calc()且含env()时，首次跳转可能不生效，需触发一次 resize 或 scroll 才修正 - Firefox 不支持
scroll-padding-block等逻辑属性缩写，建议统一用scroll-padding-top/scroll-padding-bottom - 降级方案：对不支持
scroll-padding的旧浏览器（如 Chrome hashchange，手动调用element.scrollIntoView()并传入{ block: 'start', top: 64 }偏移
实际部署时最容易漏掉的三件事
不是写上 scroll-padding-top: 64px 就完事 —— 多数线上问题都卡在这几个细节上。
- 忘记给滚动容器设
scroll-padding：常见错误是只在body上写，但真正滚动的是main或某个div，必须查清getBoundingClientRect().top计算依据的滚动上下文 - 导航栏用了
transform: translateY(-100%)等动画隐藏/显示，会导致offsetHeight为 0，JS 动态读取高度时失效 —— 应改用visibility: hidden+height: 0配合过渡 -
scroll-snap-align设在目标元素上时，若该元素是 flex item 或 grid item，且父容器未设align-items: flex-start，snap 位置可能错乱 —— 建议显式设置scroll-snap-align: start并确认父容器主轴对齐方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
