index.html如何制作一个全屏的内容切换页面？-html教程-PHP中文网

全屏切换页面的核心是css viewport与javascript事件控制结合，需用100vh/min-height:100dvh、overflow:hidden、scroll-behavior:smooth，并配合scrollintoview精准锚定、preventdefault阻止默认滚动、intersectionobserver检测激活页及规避移动端兼容性问题。

index.html如何制作一个全屏的内容切换页面？

全屏切换页面的核心是 CSS viewport + JavaScript 事件控制

直接用 height: 100vh 不够，必须配合 overflow: hidden 和 scroll-behavior: smooth（可选），否则滚动会“漏出”或跳变。移动端尤其要注意 vh 在 Safari 中的缩放 bug——页面放大时 100vh 会小于可视区，推荐用 min-height: 100dvh（现代浏览器）或回退到 100vh。

结构上建议用单层 <section></section> 平铺，每个 section 高度设为 100vh，不嵌套滚动容器；否则 touchmove 会被子元素拦截，导致滑动失效。

用 `scrollIntoView` 实现平滑切换（兼容性好、无依赖）

不用轮子，靠原生 API 就能完成。关键点不是“动画”，而是“精准锚定”和“阻止默认滚动干扰”：

section.scrollIntoView({ behavior: 'smooth', block: 'start' }) 是基础，但必须确保调用前页面没在滚动中，否则行为不可预测
监听 wheel 或 touchmove 时，要 e.preventDefault()，否则系统滚动会和你的切换冲突
移动端需同时监听 touchstart/touchend 记录位移差，仅靠 wheel 在 iOS 上不触发
切换过程中禁用重复触发：加个 isScrolling 标志位，scrollend 事件（或 setTimeout 延迟）后重置

示例片段：

Article To Html

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

下载

sections.forEach((sec, i) => {
  sec.addEventListener('click', () => {
    if (isScrolling) return;
    isScrolling = true;
    sec.scrollIntoView({ behavior: 'smooth' });
  });
});

`IntersectionObserver` 检测当前页并更新导航状态

单纯切换不够，用户需要知道“我在哪一页”。用 IntersectionObserver 监听各 section 的可见比例，比监听 scroll 事件更轻量、更准确：

阈值设为 [0.2, 0.5, 0.8]，避免临界抖动；只在 entry.intersectionRatio > 0.5 时认为该页“激活”
不要在 callback 里直接操作 DOM 样式，改用 class 切换，让 CSS 控制高亮
注意首次加载时可能所有 section 都未进入视口（比如页面从底部打开），需手动触发一次 observer.takeRecords() 或初始化时检查 getBoundingClientRect()

常见错误：rootMargin: '0px' 导致首屏 section 在刚加载时 intersectionRatio = 0 —— 改成 '-1px' 或 '0px 0px -1px 0px' 可修复。

移动端滑动卡顿？重点查这三处

90% 的“滑不动”问题出在以下三个地方，而不是 JS 性能：

CSS 中写了 transform: translateZ(0) 或 will-change: transform 却没配 backface-visibility: hidden，导致 iOS 渲染层撕裂
section 内有 input、video 或 iframe，它们会劫持 touch 事件，需加 pointer-events: none（内容区域除外）
body 或 html 上设置了 overscroll-behavior: contain，但没同步加到各 section 上，导致滑动到边界时整个页面晃动

真正难调的是 Safari 的 dvh 支持不一致和微信内置浏览器对 scroll-behavior 的部分忽略——这种时候老老实实用 window.scrollTo({ top: target.offsetTop }) + CSS @media (prefers-reduced-motion) 降级更稳。