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">包住所有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 或错位。
- 每个
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 判断逻辑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在滚动容器上加
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 写错了，而是容器根本没产生滚动上下文。
