0
点赞
收藏
分享

微信扫一扫

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

一个父级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;
    }
举报

相关推荐

0 条评论