使用 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; }
? 完整可运行示例（精简版）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TikTok-like Scroll</title>
<style>
html {
scroll-snap-type: y mandatory;
background-color: #090909;
overflow-y: scroll; /* 确保滚动可用（尤其在 Safari 中） */
height: 100%; /* 配合 body 100% 保证高度继承 */
}
body {
margin: 0;
height: 100%;
}
.videos {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: scroll;
scroll-behavior: smooth; /* 可选：添加平滑滚动过渡 */
}
.video-box {
flex: 0 0 100vh; /* 更健壮的高度控制（等价于 height: 100vh） */
display: flex;
align-items: center;
scroll-snap-align: start;
}
.video-box video {
padding: 8px;
max-height: 100vh;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain; /* 保持宽高比，完整显示（替代 cover，避免裁剪） */
}
</style>
</head>
<body>
<section class="videos">
<div class="video-box">
<video preload="none" poster="vert1.png" autoplay muted loop playsinline>
<source src="vert1.mp4" type="video/mp4">
</video>
</div>
<div class="video-box">
<video preload="none" poster="vert2.png" autoplay muted loop playsinline>
<source src="vert2.mp4" type="video/mp4">
</video>
</div>
<!-- 更多视频... -->
</section>
</body>
</html>⚠️ 注意事项与最佳实践
- 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 驱动，开箱即用。
