css实现自动平滑滚动，附带回弹效果

两行css实现自动平滑滚动

先看效果，滚动到下一屏时滚动条并不会像一般情况一样停留在滚轮指定的位置，而是会自动地滚动地把下一屏滚动到顶部，并且会有一个回弹效果

在线沙盒体验

实现

关键的css属性是scroll-snap-type 和 scroll-snap-align

兼容性如图

对于不兼容的浏览器版本个人觉得影响也不大，最多就是没有这种效果，不会对主要功能产生任何影响

<div class="continer">
  <div class="screen screen1">第一屏</div>
  <div class="screen screen2">第二屏</div>
  <div class="screen screen3">第三屏</div>
</div>

.continer{
  width: 50%;
  height: 300px;
  background: #252525;
  color: #fff;
  font-size: 30px;
  text-align: center;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /*continer是滚动容器，这里指定它在y轴方向上的滚动*/
}
.screen{
  width: 100%;
  height: 100%;
  scroll-snap-align: start; /*对齐方式为顶部对齐 start|end|center*/
}
.screen1{
  background: red;
}
.screen2{
  background: green;
}
.screen3{
  background: blue;
}

完