HTML案例：全屏切换滚动效果

最新推荐文章于 2024-07-25 11:26:35 发布

长风沛雨

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.9k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_63141957/article/details/131625207

版权

一个父级div包裹4个子级div，4个子盒子的宽高占满当前屏幕，滚动导航条自动切换到下一页/上一页

1、HTML代码

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      height: 100vh;
      overflow-y: scroll;

    }

    .container div {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box" style="background-color: antiquewhite;">
      <h1>第一页</h1>
    </div>
    <div class="box" style="background-color: chartreuse;">
      <h1>第二页</h1>
    </div>
    <div class="box" style="background-color: coral;">
      <h1>第三页</h1>
    </div>
    <div class="box" style="background-color: deeppink;">
      <h1>第四页</h1>
    </div>
  </div>

2、父盒子添加scroll-snap-type属性

    .container {
      height: 100vh;
      overflow-y: scroll;
      /* 
        添加属性：
          参数1：x/y，确定沿哪条轴进行滚动
          参数2mandatory： 检测距离大于某个程度，就进行滚动到下一屏
      */
      scroll-snap-type: y mandatory;
    }

3、子盒子添加scroll-snap-align属性

    .container div {
      width: 100%;
      height: 100vh;
      /* 
        第三步：给子盒子添加属性
        可选值：
          start：开始部分
          end：结束部分
          center：中间部分
       */
      scroll-snap-align: start;
    }