大部分人基本上都会使用JS实现页面的滚动贴合效果，在学习的过程中，偶然发现原生CSS实现滚动贴合效果的方法；
html 代码
- 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>