原生js实现移动端时间滑动选择器

 boss上遇到一个HR要求写一个移动端的招聘界面，发现这个时间滑动选择器好像确实没有多少人做，不知道是直接用插件还是咋的，反正练习一下自己手写了一下，具体效果图如上

以下是css+html片段

<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .select {
      display: none;
      position: fixed;
      justify-content: space-evenly;
      align-items: center;
      bottom: 0;
      width: 100%;
      height: 20vh;
    }
    .opt {
      flex: 1;
      height: 20vh;
      overflow: auto;
      scroll-snap-type: y mandatory;
      /* 使用 scroll-snap-type 让子元素滚动 参数y为轴 mandatory为停止后自动偏移到选项上*/
      -ms-overflow-style: none;
      /* IE 10+ */
    }

    /* 清除滚动条 */
    ::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }
    .select ul {
      display: flex;
      flex-direction: column;
      flex: 1;
      mar