17370845950

使用 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+ 均已支持）。

✅ 核心实现步骤

1. 在 html 元素上启用垂直强制吸附
   必须作用于 html（而非 body），因为 scroll-snap-type 在 body 上可能被忽略或失效：

   html {
     scroll-snap-type: y mandatory; /* y：仅垂直方向吸附；mandatory：强制停靠，禁止悬停在两个元素之间 */
     background-color: #090909;
   }

2. 为每个视频容器设置吸附锚点
   .video-box 是每个全屏视频的包裹容器，需指定其吸附对齐方式。start 表示以容器顶部为吸附基准（推荐用于首屏对齐）；也可用 center（居中对齐）或 end（底部对齐）：

   .video-box {
     display: flex;
     align-items: center;
     scroll-snap-align: start; /* 关键：定义该元素作为滚动吸附目标 */
     height: 100vh;            /* 确保每个容器占满视口高度（强烈建议显式设置） */
     scroll-margin-top: 0;     /* 可选：微调吸附偏移（如需避开固定导航栏） */
   }

3. 优化视频样式与行为
   保持原有响应式设计，同时补充 height: 100vh 保障容器高度稳定（避免因内容撑开导致吸附错位）：

   .video-box video {
     box-sizing: border-box;
     padding: 8px;
     margin: 0 auto;
     max-height: 100vh;
     max-width: 100%;
     width: auto;              /* 防止横屏视频被压缩失真 */
     height: auto;
   }

? 完整可运行示例（精简版）

⚠️ 注意事项与最佳实践

• 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 驱动，开箱即用。