css实现贴合滚动

先看一下实现效果

 我们在滚动的时候，内容会自动体贴容器，上面我只懂了一下滚轮，监测到我们操作后，内容自动滚动到和容器顶部贴合

使用css+html 即可实现

<div class="main">
  <section>我是内容1</section>
  <section>我是内容2</section>
  <section>我是内容3</section>
  <section>我是内容4</section>
</div>


.main {
  scroll-snap-type: y mandatory; // y轴 贴合
  height: 100vh; // 视口
  overflow: auto;
}
section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start; // 贴合容器开始位置
}

scroll-snap-type

父容器设置该属性，两个值，第一个值为 x轴 或 y轴

第二个值为贴合模式  mandatory ：发生滚动触发贴合

                                  proximity ：当内容和容器距离小于一定距离时，触发贴合（这个距离我                                                             们不能自定义设置）

看一下第二种模式，当我滑动到中部时，也没有触发贴合，到我滑动到下一个内容距离容器顶部一定距离时，松开鼠标，内容2自动贴合到容器

scroll-snap-align

这是内容的属性，设置对齐方式

可选：start end center

对应 头部位置对齐 底部位置对齐 居中位置对齐

直接看这个例子

  height: 120vh;
  scroll-snap-align: end;

现在内容的高是 120vh ，贴合后，底部对齐，可以看到我们的文字看不到了，上面例子中头部对齐的话，能看到头部的文字，居中应该页不用过多展示了

scroll-padding-top

当我们有一个固定的导航栏时，我们就需要这个属性来，指定贴合后，内容相当于容器的距离

<div class="main">
  <nav>DaoHang</nav>
  <section>我是内容1</section>
  <section>我是内容2</section>
  <section>我是内容3</section>
  <section>我是内容4</section>
</div>

nav{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    background: mediumseagreen;
    text-align: center;
}

比如我们加入一个 nav标签 固定到头部

可以看到我们的贴合被挡住了，我们设置上 scroll-padding-top 值为偏离的距离，在这里例子中是nav的高度 100px

scroll-snap-type: y mandatory;
scroll-padding-top: 100px;

自动到了指定位置，和顶部对齐。这都是 y 轴 的例子，x轴也是一样的配置用法。

注：这个属性比较新有一定兼容问题

想要深入了解可以去MDN查看文档

scroll-snap-type - CSS（层叠样式表） | MDN (mozilla.org)