全屏滚动页面的核心是 CSS min-height: 100dvh + scroll-snap-type: y mandatory，需配合 scroll-snap-align: start、禁用 overscroll-behavior 及用 IntersectionObserver 监听页面切换，避免 JS 模拟滚动性能问题。
全屏滚动页面的核心是 CSS height: 100vh + overflow: hidden
直接用 height: 100vh 给每个 section 设定视口高度，再把 body 的默认滚动关掉，就能实现“一屏一屏”切换的效果。但注意：iOS Safari 在地址栏收放时会动态改变 vh 值，导致页面跳动；Android Chrome 也有类似问题。所以不能只依赖 vh，得加一层 JS 补偿或改用 min-height: 100dvh（dvh 是设备视口单位，更稳定）。
- 优先用
min-height: 100dvh替代height: 100vh，兼容现代浏览器（Chrome 105+、Safari 16.4+、Firefox 110+） - 老版本浏览器 fallback：用 JS 动态设置
style.height = window.innerHeight + 'px'，并在resize事件里更新 - 必须给
html, body { margin: 0; padding: 0; }，否则上下可能多出空白
如何让滚动“卡”在每一页，而不是自由滑动？
纯 CSS 方案有限，scroll-snap-type 是目前最轻量且原生支持的解法。它不依赖 JS，性能好，但需注意容器和子项的配合规则。
- 滚动容器（如
<main>）设scroll-snap-type: y mandatory;，且必须有overflow-y: auto和height（或max-height） - 每个全屏 section 设
scroll-snap-align: start; - 禁用 iOS 滚动回弹：加
-webkit-overflow-scrolling: none;（仅旧版 Safari 需要） - 移动端需额外加
touch-action: pan-y;防止误触发横向拖拽
scroll-behavior: smooth 能否替代 JS 滚动库？
可以用于基础锚点跳转（比如点击导航跳到对应 section），但它不控制滚动“停靠逻辑”，也不监听滚动位置，更无法做进度条、视差或滚动触发动画。也就是说：scroll-behavior: smooth 只负责“动得柔和”，不管“停在哪”或“怎么响应”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 适合静态导航跳转场景，例如
<a href="#section2">第二页</a>配合<section id="section2"> - 如果需要滚动监听（如高亮当前导航项）、懒加载、或自定义缓动曲线，就必须用
IntersectionObserver或scroll事件 +requestAnimationFrame - 注意：Firefox 对
scroll-behavior的兼容性略差，部分版本不支持平滑滚动到id锚点
为什么用 IntersectionObserver 而不是 scroll 事件监听当前页？
因为 scroll 事件太频繁，尤其在快速滚动时容易丢帧或卡顿；而 IntersectionObserver 是浏览器原生异步回调，只在元素进入/离开视口时触发，性能更可控，也天然防抖。
立即学习“前端免费学习笔记（深入）”；
- 监听每个 section 是否“完全占据视口”：配置
threshold: [0, 1]，并检查entry.isIntersecting && entry.intersectionRatio === 1 - 避免重复触发：一个 section 进入后，先
unobserve它，等滚动离开后再observe回来（或用节流） - 注意兼容性：IE 完全不支持，需用 polyfill 或降级为
getBoundingClientRect()手动判断
scroll-snap、dvh、IntersectionObserver），越不容易出兼容性问题，也越少被移动端系统干预。但这也意味着你要亲手处理那些“看起来理所当然、其实各平台行为不一”的细节——比如 iOS 键盘弹出时视口重算、折叠屏设备的 dvh 精度、甚至某些安卓 WebView 对 scroll-snap 的忽略。 
