SCROLL EFFECT
滚动吸附分页Scroll Snap
滑动松手后自动吸附到最近一页，像原生 App 的翻页，纯 CSS 零 JS。
效果预览
第一屏松手自动吸附
第二屏scroll-snap-align
第三屏零 JS 实现
适合用在哪
移动端 Banner 轮播、全屏分段叙事、图片浏览器。
容易踩的坑
- 竖向全屏吸附配 mandatory，单屏内容超过 100vh 时下半部分永远滚不到。
- 指示圆点在 scroll 事件里不节流计算索引，快速滑动时频繁重绘且圆点闪烁。
- 移动端用 100vh 做每屏高度，地址栏伸缩导致吸附位置错位，应改用 100dvh。
设计提示词 · Prompt
滚动吸附分页（Scroll Snap）：容器 overflow-x:auto + scroll-snap-type:x mandatory（强制吸附）或 proximity（接近才吸）；子项 scroll-snap-align:start/center，scroll-snap-stop:always 防止一次滑过两页。配 indicator 圆点用 scroll 事件计算当前页索引。竖直全屏翻页版：容器 height:100vh + overflow-y:auto + snap-type:y mandatory，每屏 100vh。这是最被低估的 CSS 能力——轮播的 90% 场景根本不需要 JS 库。
Scroll Snap: container overflow-x:auto + scroll-snap-type:x mandatory (forced snapping) or proximity (snaps only when close); children use scroll-snap-align:start/center, and scroll-snap-stop:always prevents skipping two pages in one swipe. Pair with indicator dots, computing the current page index from scroll events. Vertical full-screen paging version: container height:100vh + overflow-y:auto + snap-type:y mandatory, each screen 100vh. This is the most underrated CSS capability — 90% of carousel scenarios don't need a JS library at all.
常见搭配
同一页面里经常和「滚动吸附分页」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s">
<div class="d-snap">
<div class="d-snap__page" style="background:var(--i-gd)"><b>第一屏</b><span>松手自动吸附</span></div>
<div class="d-snap__page" style="background:linear-gradient(135deg,#0891b2,#4f46e5)"><b>第二屏</b><span>scroll-snap-align</span></div>
<div class="d-snap__page" style="background:#17171b"><b>第三屏</b><span>零 JS 实现</span></div>
</div>
<div class="d-snap__dots"><i></i><i></i><i></i></div>
</div>