✏️ AI 术语图鉴

滚动吸附 · Scroll Snap

英文：Scroll Snap

动效与交互难度：入门 ★

🗣️一句话大白话

滚动自动停在最近的整块/整屏位置，像翻页一样干脆。轮播式首页、卡片墙、分屏演示的标准交互。scroll-snap 让滚动“被吸到”指定位置：每块内容占一屏或固定高度，滚动松手后自动对齐。告诉 AI“整屏吸附、每屏一块”即可。适合分屏叙事、卡片横滑、图片画廊；内容不足一屏会留白，需要配合 min-height 处理。

🎬真实场景

分屏首页、横向卡片墙、图片画廊、产品切换

📮你可以这样说

「【图像模型版】设计分屏滚动页：每屏占满视口，滚动时整屏对齐吸附，一屏一块内容，避免半屏卡住。 【HTML/CSS/JS 版】[容器] 用 CSS scroll-snap-type: y mandatory + 子项 scroll-snap-align: start；每屏 min-height: 100vh。」

通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。

⚠️边界与常见误解

  • ▸误解：吸附=自动播放；吸附是“停下时对齐”，与自动轮播是两回事
  • ▸内容不足一屏会产生难看的留白

🚫什么时候别用

  • ✗内容长短不一的列表页
  • ✗需要自由浏览的长文

🧩常见变体

整屏吸附半屏吸附横向吸附自由+吸附混合

💡小贴士

  • ✦mandatory 卡手用 proximity；移动端注意地址栏高度变化

🕸️知识关系图

这个词条与相关术语、AI绘图 知识的连接关系

相关术语相关术语
滚动触发
Scroll-triggered Animation
滚动进度指示
Scroll Progress Indicator
滚动吸附
Scroll Snap

🔗相关术语

滚动触发Scroll-triggered Animation滚动进度指示Scroll Progress Indicator

📌素材来源

词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗