怎么把网页弄成 TikTok 那样？别怕，简洁！

体验感拉满。 嘿，想让你的网页像 TikTok 一样，每次滑动都能精准停在视频上吗？以前觉得要找各种繁杂的 JavaScript 库，当前告诉你，其实只要用 CSS 就能搞定！这玩意儿特别简洁，就像搭积木一样，没啥技术手段含量。

准备工作岗位：让浏览器了解你要玩滚动吸附

先来看，我们要告诉浏览器：“我要让这一些视频按照我的想法滚动！ 公正地讲... ” 这就要用到几个 CSS 属性：

• scroll-snap-type: 当前这个是关键的。它告诉浏览器到底要怎么吸附。我们常用的就是 y mandatory意思是垂直方向的强较大制吸附。
• scroll-snap-align: 当前这个就决定了各个视频应当停在哪里了。比如 start 表示停在容器顶端； center 表示停在中间； end 表示停在容器底部。

具体怎么做？一步一步来！

1. 给各个视频一个盒子: 我们需要把各个视频都放在一个盒子里 。
2. 设置吸附锚点: 给各个盒子设置 scroll-snap-align: start; 。这样被吸附到当前这个盒子的顶部。
3. 保证盒子的较高度: 让各个盒子尽有可能地较高 。这样才能保证视频能够全屏体现。
4. 启用滚动吸附: 设置 html 的 scroll-snap-type 为 y mandatory, body 的 overflow-y 为 scroll, height 为 100% ，这样才能保证整个页面都有滚动吸附效果。