使用
css
`scroll-snap-type` 和 `scroll-snap-align` 可原生实现全屏视频列表的强制滚动对齐，完美复刻
tiktok
/youtube shorts 的“一屏一视频”滑动体验，无需任何
java
script 库或额外脚本。
要打造类似 TikTok 或 YouTube Shorts 的沉浸式垂直视频流——即用户每次滚动都精准停驻在单个全屏视频上，关键在于启用
浏览器
原生的
CSS 滚动吸附（Scroll Snap）
功能。这完全通过纯 CSS 实现，零 JavaScript 依赖，轻量、高效且兼容性良好（Chrome 69+、Firefox 68+、Safari 11.1+、Edge 79+ 均已支持）。
✅ 核心实现步骤
在html元素上启用垂直强制吸附
必须作用于 html（而非 body），因为 scroll-snap-type 在 body 上可能被忽略或失效：
为每个视频容器设置吸附锚点
.video-box 是每个全屏视频的包裹容器，需指定其吸附对齐方式。start 表示以容器顶部为吸附基准（推荐用于首屏对齐）；也可用 center（居中对齐）或 end（底部对齐）：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
优化视频样式与行为
保持原有响应式设计，同时补充 height: 100vh 保障容器高度稳定（避免因内容撑开导致吸附错位）：
? 完整可运行示例（精简版）
⚠️ 注意事项与最佳实践
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 驱动，开箱即用。
html {
scroll-snap-type: y mandatory; /* y：仅垂直方向吸附；mandatory：强制停靠，禁止悬停在两个元素之间 */
background-color: #090909;
}.video-box {
display: flex;
align-items: center;
scroll-snap-align: start; /* 关键：定义该元素作为滚动吸附目标 */
height: 100vh; /* 确保每个容器占满视口高度（强烈建议显式设置） */
scroll-margin-top: 0; /* 可选：微调吸附偏移（如需避开固定导航栏） */
}.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