常用HTML网页全屏滑动翻页基础框架代码-html教程-PHP中文网

scroll-snap-type 不生效是因为未满足显式可滚动容器的硬性条件：必须作用于非根元素的固定尺寸容器（如.height: 100vh）、设置overflow-y: scroll、子元素为直接子项且设scroll-snap-align: start，禁用margin和transform等干扰属性。

常用html网页全屏滑动翻页基础框架代码

scroll-snap-type 是目前最轻量、最原生的全屏滑动翻页方案，不需要 JS 就能工作，但必须满足几个硬性条件，否则它根本不会触发。

为什么 `scroll-snap-type` 不生效？

不是写上就管用，浏览器只对「显式可滚动容器」应用 snap 行为。常见失效原因：

body 或 html 上直接写 scroll-snap-type: y mandatory —— 失效，因为默认滚动由 html 承担，但它通常没有溢出，不被视为可滚动容器
子 section 高度用 min-height: 100vh 或靠内容撑开 —— 失效，snap 需要明确的、固定的停靠锚点
给 section 加了 margin-top —— 锚点偏移，视觉停靠位置和实际 offsetTop 不一致
没设 overflow-y: scroll（或 auto）在容器上 —— 浏览器不认为它需要 snap

`scroll-snap-type` 正确结构怎么写？

必须新建一个包裹层，显式控制滚动行为：

<div class="scroll-container">
  <section class="page">第一屏</section><section class="page">第二屏</section><section class="page">第三屏</section>
</div>

CSS 中关键四行不能少：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

.scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
.page { height: 100vh; scroll-snap-align: start; }
html, body { margin: 0; padding: 0; height: 100%; }
移动端加 .scroll-container { overscroll-behavior-y: contain; touch-action: pan-y; }

横向滑动翻页怎么配？

左右滑动本质一样，只是把 y 换成 x，但要注意防误触干扰：

.scroll-container { overflow-x: auto; scroll-snap-type: x mandatory; white-space: nowrap; }
.page { display: inline-block; width: 100vw; scroll-snap-align: start; }
必须加 touch-action: pan-y —— 否则 iOS Safari 会拦截横向 touchmove，默认只允许纵向滚动
隐藏滚动条需分写：::-webkit-scrollbar { display: none; } + scrollbar-width: none;（Firefox）

哪些地方最容易被忽略？

不是兼容性差才不用 scroll-snap-type，而是细节一错就彻底静默失效：

scroll-snap-align 必须带值（start / center），只写属性名无效
section 不能用 flex 或 grid 布局拉伸高度 —— 它必须是“自己撑满”，而不是被父容器分配空间
Safari 15.4 之前不支持 mandatory，降级用 proximity 时吸附感弱，且无法保证每次停准
键盘方向键、空格键、PageDown 等原生滚动操作默认触发 snap，但 scrollTo() 不会自动对齐 —— 如需 JS 控制，得配合 scroll-behavior: smooth + 手动计算 scrollLeft/scrollTop