大部分人基本上都会使用JS实现页面的滚动贴合效果，在学习的过程中，偶然发现原生CSS实现滚动贴合效果的方法；
html 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滚动贴合</title><style>* {margin: 0;padding: 0;}.container {width: 1200px;height: 100vh;overflow-y: scroll;scroll-snap-type: y mandatory;margin: auto;}.container .item {width: 100%;height: 100%;padding: 30px;border: 1px dashed #cccccc;box-sizing: border-box;scroll-snap-align: start;border-radius: 10px;background: #f9f9f9;margin-bottom: 16px;}.container .item:last-child {margin-bottom: 0;}.container .item img {width: 100%;height: 100%;object-fit: cover;border: 1px solid #ffffff;transition: all 0.4s;}.container .item:hover img {box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);border-radius: 10px;}</style>
</head>
<body>
<div class="container"><div class="item"><img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=949373678,2089110629&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=2196842896,2809445370&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=3779521506,3594871140&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=3360446468,3126444958&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=2749005241,3756993511&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=2928560209,826823219&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=3780014697,4013718301&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=832449998,3859178369&fm=193&f=GIF" alt=""></div><div class="item"><img src="https://t7.baidu.com/it/u=1710836566,438775692&fm=193&f=GIF" alt=""></div>
</div>
</body>
</html>
