scroll-snap-type 必须写在滚动容器上而非 section 或子元素，否则失效；容器需满足：100dvh/100vw 尺寸、overflow 为 auto/scroll、内容总高度大于容器高度；scroll-snap-align 仅对直接子元素生效，且必须成对设置。

scroll-snap-type 必须写在滚动容器上，不是 section 或子元素

绝大多数吸附失效，是因为把 scroll-snap-type: y mandatory 错误地加在了 section、.slide 或 .item 这类子元素上。它只对**滚动容器本身**生效——比如一个显式设置了 overflow-y: auto 的 div.scroll-container、main，甚至 html（TikTok 风格全页滚动必须用 html）。
DevTools 里能看到声明，但 computed styles 中 scroll-snap-type 值为空或不计算，就是写错位置的明确信号。

容器必须同时满足三个硬性条件，缺一不可

即使样式都写对了，只要以下任一条件不满足，scroll-snap 就完全不触发：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• height: 100vh（垂直）或 width: 100vw（水平）——推荐用 100dvh 替代 100vh，避免 iOS Safari 地址栏收缩导致高度跳变
• overflow-y: auto 或 overflow-y: scroll（垂直）；overflow-x: auto（水平）——不能是 hidden，也慎用 scroll（部分 Android WebView 兼容差）
• 内容总高度 > 容器高度（即真实可滚动）——仅靠 height: 100vh 不够，必须有多个 section 叠加超出

scroll-snap-align 必须成对设置，且仅对直接子元素生效

scroll-snap-align 决定子元素哪一部分“贴住”容器视口边界，但它不是居中显示，而是指定锚点：

• scroll-snap-align: start start → 子元素**顶部左侧**对齐容器左上角（垂直场景常用 start 单值简写，等价于 start start）
• scroll-snap-align: center center → 子元素**中心点**对齐容器中心（横向轮播更自然，但需所有子元素尺寸严格一致）
• scroll-snap-align: end end → 子元素**右下角**对齐容器右下角（极少单独使用）
• 单写一个值如 scroll-snap-align: center 是无效的，浏览器会忽略整条声明
• 该属性**只对滚动容器的直接子元素生效**，中间套一层 div 就会失效

iOS Safari 的 mandatory 并不真正“强制”，真机测试不可省略

快速滑动后松手，Safari 可能停在两个吸附点之间——这不是 bug，是 WebKit 对滚动惯性的主动妥协，尤其当 section 高度不一致时更明显：

• 确保所有子元素高度严格一致（如统一用 min-height: 100dvh，不用 height: 100vh + padding 模拟居中）
• 避免在 position: sticky 或含 transform 的父容器里嵌套 scroll-snap
• 必要时配合 scroll-behavior: smooth 和 scrollend 事件做 JS 修正（注意：旧版 Safari 不支持 scrollend）
• 实际滚动是否吸附，不看 DevTools 样式面板，而要看松手后是否真的停在区块边界——那才是唯一可信的判断依据

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！