实现滚动贴合

最新推荐文章于 2023-10-09 09:42:45 发布

「已注销」

最新推荐文章于 2023-10-09 09:42:45 发布

阅读量225

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/lyc_3858/article/details/125193010

版权

案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

scroll-snap-type: y mandatory;

第一个值 : 表示滚动贴合的方向

y : 纵向滚动贴合

x : 横向滚动贴合

第二个值 : 表示贴合方式

mandatory : 表示强制滚动

proximity : 当元素移动到离贴合点小于一定的距离的时候在进行贴合（注:这个距离是根据浏览器自己规定的）

scroll-snap-align: start | center | end; 设置子元素相对父元素滚动贴合的对齐方式

这里引入一张别人的图

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动贴合</title>
    <style>
        /* 被注释掉的代码是为了让效果更好看加上的,没注释的就是核心代码 */

        .a {
            scroll-snap-type: y mandatory;

            /* 需要把滚动条设置到直接父容器，scroll-snap-type 才能生效，
            默认是在 body 上，现在是 div 上 */
            overflow: scroll;
            height: 100vh;

            /* 隐藏x轴的滚动条 */
            /* overflow-x: hidden; */
        }

        /* 这个代码主要是隐藏页面的滚动条 */
        /* body::-webkit-scrollbar {
            display: none;
            
        } */
        .a div {
            width: 100vw;
            height: 100vh;
            scroll-snap-align: start;
        }
    </style>
  </head>
  <body>
    <div class="a">
      <div>内容1</div>
      <div>内容2</div>
      <div>内容3</div>
      <div>内容4</div>
    </div>
  </body>
</html>