css新特性滚动捕捉，吸附

  <div class="main">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
<style lang="scss">
ul,li{
  display: inline-block;
  list-style: none;
}
.main{
  width:400px;
  height:100px;
  border:1px solid #ccc;
  overflow: auto;
  scroll-snap-type:x mandatory;
}
ul{
  width:1800px;
  height:100px;
  box-sizing: border-box;
}
li{
  height: 100px;
  width:200px;
  margin-right:200px;
  background: red;
  scroll-snap-align:start;
  box-sizing: border-box;
}
</style>

滚动的时候，红色区域总会吸附在左边