使用 css 原生 scroll-snap 属性即可实现类似 tiktok/youtube shorts 的全屏视频垂直滚动与精准吸附效果，无需 javascript；关键在于为 `html` 元素设置 `scroll-snap-type: y mandatory`，并为每个视频容器添加 `scroll-snap-align: start`。
要打造真正“TikTok-like”的垂直视频流体验——即用户滚动时，视口自动对齐并锁定到单个完整视频区域（而非停留在两个视频之间），CSS 提供了专为此类交互设计的原生解决方案：Scroll Snap API。它完全基于纯 CSS，零 JavaScript 依赖，轻量、高性能且语义清晰。
核心配置仅需两步：
-
在滚动容器上启用滚动吸附行为
必须作用于实际发生滚动的容器。在标准文档流中，body 默认不触发滚动（滚动发生在 html 根元素），因此务必将 scroll-snap-type 应用于 html 元素（而非 body）：html { scroll-snap-type: y mandatory; background-color: #090909; }- y 表示仅在垂直方向启用吸附；
- mandatory 强制滚动结束时必须停靠在某个吸附点上（避免悬停在中间）；也可选 proximity（更松散，适合长列表）。
-
为每个视频区块定义吸附锚点
给每个 .video-box 添加 scroll-snap-align，指定其哪一部分与视口对齐：.video-box { display: flex; align-items: center; scroll-snap-align: start; /* 视口顶部与 .video-box 顶部对齐 */ height: 100vh; /* 关键！确保每个区块占满视口高度 */ scroll-margin-top: 0; /* 可选：微调吸附偏移（如需顶部留白） */ }✅ 注意：.video-box 必须具有明确的高度（如 100vh），否则吸附位置无法准确计算。原代码中缺失该声明，需补全。
完整优化后的 <style> 片段如下：
<style>
html {
background-color: #090909;
scroll-snap-type: y mandatory;
overflow-y: auto; /* 确保滚动可用（尤其在 Safari 中） */
height: 100%; /* 配合 body 100% 使用，保障高度继承 */
}
body {
margin: 0;
height: 100%;
}
.videos {
display: flex;
flex-direction: column;
height: 100%;
}
.video-box {
flex: 0 0 100vh; /* 更健壮的写法：禁止缩放 + 固定高度 */
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.video-box video {
box-sizing: border-box;
padding: 8px;
max-height: 100vh;
max-width: 100%;
width: auto;
height: auto;
}
</style>? 注意事项与增强建议：
- 兼容性：现代浏览器（Chrome 69+、Firefox 68+、Safari 11.1+、Edge 79+）均支持，可查 MDN 兼容表；
- 移动端适配：添加 viewport meta 标签（你已具备），并确保视频含 playsinline 和 muted（你已正确设置）；
- 性能提示：避免在 .video-box 上使用 transform 或 filter，可能干扰 scroll-snap 计算；
- 无障碍友好：scroll-snap-type: mandatory 不影响键盘导航（如空格键、PageDown），但建议为 .video-box 添加 tabindex="0" 以支持聚焦跳转。
至此，你的视频列表便拥有了原生、丝滑、无 JS 的 TikTok 式滚动体验——简洁、可靠，且符合现代 Web 最佳实践。
