css 滚动贴合

马卫斌前端工程师

于 2023-10-09 09:42:45 发布

阅读量168

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_35350009/article/details/133694693

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

大部分人基本上都会使用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>