scroll-snap-type 必须设在显式可滚动容器上，直接作用于 body 或 html 无效；正确做法是创建 height: 100vh、overflow-y: scroll、scroll-snap-type: y mandatory 的包裹层，并确保每个 section 设 height: 100vh 且 scroll-snap-align: start 或 center。

scroll-snap-type 必须设在显式可滚动容器上

直接给 body 或 html 加 scroll-snap-type: y mandatory 基本无效——浏览器默认滚动由 html 承担，但它常无内容溢出，scroll-snap 根本不触发。

正确做法是新建一个包裹层：

• 用 <div class="scroll-container"> 包住所有 <code>section
• .scroll-container 必须设 height: 100vh（不能用 min-height）、overflow-y: scroll、scroll-snap-type: y mandatory
• html 和 body 加 margin: 0; padding: 0; height: 100%，防止外边距干扰尺寸计算

每个 section 必须显式声明尺寸与对齐方式

scroll-snap-align 不是“建议对齐”，而是强制停靠点。如果高度不固定，浏览器无法确定停在哪，就会跳过 snap 或错位。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 每个 section 必须设 height: 100vh
• 必须配 scroll-snap-align: start（顶部对齐）或 center；只写 scroll-snap-align 不加值无效
• 禁用 margin-top/margin-bottom，它会改变 offsetTop，导致视觉停靠位置偏移
• 避免用 flex 拉伸 section，也不依赖内容自适应高度

移动端必须处理 overscroll-behavior 和 touch-action

iOS Safari 默认开启弹性回弹，滚动到底部时拉出空白再回弹，不仅破坏沉浸感，还会让 window.scrollY 在回弹阶段返回异常值，干扰 JS 判断逻辑。

• 在滚动容器上加 overscroll-behavior-y: contain，彻底禁用纵向回弹
• 横向滚动场景（如相册）必须加 touch-action: pan-x，否则 iOS 会默认锁死横向滑动
• 别在滚动容器内监听 touchstart 或 touchmove，哪怕空回调也会触发 passive event warning，拖慢滚动帧率

隐藏滚动条要分浏览器写死

Chrome/Edge/Safari 下，scroll-snap 容器的滚动条默认可见且占位——即使设了 display: none，仍可能造成内容轻微偏移。

• Chrome/Edge：.scroll-container::-webkit-scrollbar { display: none; }
• Safari：.scroll-container { -webkit-overflow-scrolling: touch; } + 配合 overscroll-behavior-y: contain
• 别指望 scrollbar-width: none 在 Safari 生效，它只在 Firefox 有效

最容易被忽略的是：所有 scroll-snap 行为都依赖“可滚动容器有明确溢出”，而不是“看起来像在滚动”。很多问题不是 CSS 写错了，而是容器根本没产生滚动上下文。