TikTok分屏滚动怎么实现？

珍惜时间，勤奋学习！今天给大家带来《TikTok垂直分屏滚动实现方法详解》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

使用 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 依赖，轻量、高性能且语义清晰。

核心配置仅需两步：

1. 在滚动容器上启用滚动吸附行为
   必须作用于实际发生滚动的容器。在标准文档流中，body 默认不触发滚动（滚动发生在 html 根元素），因此务必将 scroll-snap-type 应用于 html 元素（而非 body）：

   html {
     scroll-snap-type: y mandatory;
     background-color: #090909;
   }

   • y 表示仅在垂直方向启用吸附；
   • mandatory 强制滚动结束时必须停靠在某个吸附点上（避免悬停在中间）；也可选 proximity（更松散，适合长列表）。

2. 为每个视频区块定义吸附锚点
   给每个 .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），否则吸附位置无法准确计算。原代码中缺失该声明，需补全。

完整优化后的