• css 滚动贴合

    大部分人基本上都会使用JS实现页面的滚动贴合效果，在学习的过程中，偶然发现原生CSS实现滚动贴合效果的方法；

    html 代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>滚动贴合title>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.         }
    11.  
    12.         .container {
    13.             width: 1200px;
    14.             height: 100vh;
    15.             overflow-y: scroll;
    16.             scroll-snap-type: y mandatory;
    17.             margin: auto;
    18.         }
    19.  
    20.         .container .item {
    21.             width: 100%;
    22.             height: 100%;
    23.             padding: 30px;
    24.             border: 1px dashed #cccccc;
    25.             box-sizing: border-box;
    26.             scroll-snap-align: start;
    27.             border-radius: 10px;
    28.             background: #f9f9f9;
    29.             margin-bottom: 16px;
    30.         }
    31.  
    32.         .container .item:last-child {
    33.             margin-bottom: 0;
    34.         }
    35.  
    36.         .container .item img {
    37.             width: 100%;
    38.             height: 100%;
    39.             object-fit: cover;
    40.             border: 1px solid #ffffff;
    41.             transition: all 0.4s;
    42.         }
    43.  
    44.         .container .item:hover img {
    45.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    46.             border-radius: 10px;
    47.         }
    48.     style>
    49. head>
    50. <body>
    51. <div class="container">
    52.     <div class="item">
    53.         <img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" alt="">
    54.     div>
    55.     <div class="item">
    56.         <img src="https://t7.baidu.com/it/u=949373678,2089110629&fm=193&f=GIF" alt="">
    57.     div>
    58.     <div class="item">
    59.         <img src="https://t7.baidu.com/it/u=2196842896,2809445370&fm=193&f=GIF" alt="">
    60.     div>
    61.     <div class="item">
    62.         <img src="https://t7.baidu.com/it/u=3779521506,3594871140&fm=193&f=GIF" alt="">
    63.     div>
    64.     <div class="item">
    65.         <img src="https://t7.baidu.com/it/u=3360446468,3126444958&fm=193&f=GIF" alt="">
    66.     div>
    67.     <div class="item">
    68.         <img src="https://t7.baidu.com/it/u=2749005241,3756993511&fm=193&f=GIF" alt="">
    69.     div>
    70.     <div class="item">
    71.         <img src="https://t7.baidu.com/it/u=2928560209,826823219&fm=193&f=GIF" alt="">
    72.     div>
    73.     <div class="item">
    74.         <img src="https://t7.baidu.com/it/u=3780014697,4013718301&fm=193&f=GIF" alt="">
    75.     div>
    76.     <div class="item">
    77.         <img src="https://t7.baidu.com/it/u=832449998,3859178369&fm=193&f=GIF" alt="">
    78.     div>
    79.     <div class="item">
    80.         <img src="https://t7.baidu.com/it/u=1710836566,438775692&fm=193&f=GIF" alt="">
    81.     div>
    82. div>
    83. body>
    84. html>

  • 相关阅读:
    AIGC创作系统ChatGPT网站系统源码，支持最新GPT-4-Turbo模型
    Redis缓存同步1-策略介绍
    【一】1D测量 Measuring——measure_projection()算子
    基于深度神经网络的分类--实现与方法说明
    SpringBoot简介
    【leetcode】【初级算法】【链表3】反转链表
    SpringCloud（二）
    VUE+Nodejs 商城项目练习项目（Node部分）
    基于机器视觉的移动消防机器人（一）--功能设计
    springboot(ssm邮件过滤系统 在线邮箱平台Java(code&LW)
  • 原文地址：https://blog.csdn.net/qq_35350009/article/details/133694693