index.html如何制作一个全屏滚动页面？-html教程-PHP中文网

全屏滚动页面的核心是 css min-height: 100dvh + scroll-snap-type: y mandatory，需配合 scroll-snap-align: start、禁用 overscroll-behavior 及用 intersectionobserver 监听页面切换，避免 js 模拟滚动性能问题。

index.html如何制作一个全屏滚动页面？

全屏滚动页面的核心是 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，性能好，但需注意容器和子项的配合规则。

Article To Html

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

下载

滚动容器（如 <main></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 只负责“动得柔和”，不管“停在哪”或“怎么响应”。

适合静态导航跳转场景，例如 @#@#@#@#@#@#@#@#@#@0 配合 <section id="section2"></section>
如果需要滚动监听（如高亮当前导航项）、懒加载、或自定义缓动曲线，就必须用 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 的忽略。