使用 css `scroll-snap-type` 和 `scroll-snap-align` 可原生实现全屏视频列表的强制滚动对齐，完美复刻 tiktok/youtube shorts 的“一屏一视频”滑动体验，无需任何 javascript 库或额外脚本。
要打造类似 tiktok 或 YouTube Shorts 的沉浸式垂直视频流——即用户每次滚动都精准停驻在单个全屏视频上，关键在于启用浏览器原生的 css 滚动吸附（Scroll Snap） 功能。这完全通过纯 CSS 实现，零 javaScript 依赖，轻量、高效且兼容性良好（chrome 69+、firefox 68+、safari 11.1+、edge 79+ 均已支持）。
✅ 核心实现步骤
-
在 html 元素上启用垂直强制吸附
必须作用于 html（而非 body），因为 scroll-snap-type 在 body 上可能被忽略或失效：html { scroll-snap-type: y mandatory; /* y：仅垂直方向吸附；mandatory：强制停靠，禁止悬停在两个元素之间 */ background-color: #090909; } -
为每个视频容器设置吸附锚点
.video-box 是每个全屏视频的包裹容器，需指定其吸附对齐方式。start 表示以容器顶部为吸附基准（推荐用于首屏对齐）；也可用 center（居中对齐）或 end（底部对齐）：.video-box { display: flex; align-items: center; scroll-snap-align: start; /* 关键：定义该元素作为滚动吸附目标 */ height: 100vh; /* 确保每个容器占满视口高度（强烈建议显式设置） */ scroll-margin-top: 0; /* 可选：微调吸附偏移（如需避开固定导航栏） */ } -
优化视频样式与行为
保持原有响应式设计，同时补充 height: 100vh 保障容器高度稳定（避免因内容撑开导致吸附错位）：.video-box video { box-sizing: border-box; padding: 8px; margin: 0 auto; max-height: 100vh; max-width: 100%; width: auto; /* 防止横屏视频被压缩失真 */ height: auto; }
? 完整可运行示例（精简版）
TikTok-like Scroll ⚠️ 注意事项与最佳实践
- html 而非 body 是关键：scroll-snap-type 必须设在根滚动容器（通常是 html），否则无效；
- 显式设置容器高度：.video-box 建议使用 flex: 0 0 100vh 或 height: 100vh，避免因内容变化导致吸附失效；
- 移动端适配：务必添加 playsinline 属性（已包含），确保 ios 视频内联播放；autoplay muted 是自动播放前提；
- 性能提示：scroll-snap-type: mandatory 在快速滑动时可能触发浏览器优化，若需更精细控制（如拖拽松手后惯性吸附），仍需 javascript，但基础体验已足够流畅；
- 无障碍友好：滚动吸附不影响键盘导航（如 Page Down / Space）和屏幕阅读器，符合 WCAG。
至此，你已拥有一套简洁、可靠、高性能的 TikTok 式全屏视频滚动方案——全部由 CSS 驱动，开箱即用。