自建的Timepicker Vue JS组件功能

Question

我想知道是否有人知道如何在用户停留在选定的时间上时，选定的时隙将使向上滚动以使其垂直居中对齐。

这是我第一次构建复杂的时间选择器。我还需要选择时间范围（最小-最大），并使其尽可能动态。现在只是在寻找想法，不要期待一个复杂的答案！

请看我的小提琴，向您展示我的意思     

    new Vue({
      el: "#app",
      data: {
        current: null,
        testList:
        [
          {
            id: 1,
            time: '11.00'
          },
          {
            id: 2,
            time: '11.15'
          },
          {
            id: 3,
            time: '11.30'
          },
          {
            id: 4,
            time: '11.45'
          },
          {
            id: 5,
            time: '12.00'
          },
          {
            id: 6,
            time: '12.15'
          },
          {
            id: 7,
            time: '12.30'
          },
          {
            id: 8,
            time: '13.00'
          },
          {
            id: 9,
            time: '13.15'
          },
          {
            id: 10,
            time: '13.30'
          },
          {
            id: 11,
            time: '13.45'
          },
        ]
      },
      methods: {
      	setCurrent(key)
        {
          this.current = key;
        }
      },
      beforeMount() {
        this.current = 3;
      },
    })

    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }

    #app {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      transition: all 0.2s;
    }

    .selectTime2 {
      height: 136px;
      overflow-y: auto;
      list-style: none;
      padding: 0;
      max-width: 172px;
      width: 100%;
      margin: 50px auto;
    }

    .selectTime2::-webkit-scrollbar {
        width: 0;
      }
      
      .timeSlot {
        text-align: center;
        color: #ECF1F2;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .selected {
        color: #679198;
        font-size: 24px;
        font-weight: bolder;
        position: relative;

      }

      .light {
        color: #ACC6CB;
        font-size: 18px;
      }

      .lighter {
        color: #ECF1F2;
        font-size: 14px;
      }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

    <div id="app">
    <h1>
    On hover select time component
    </h1>
      <ul class="selectTime2">
                    <li v-for="test in testList"
                        @mouseover="setCurrent(test.id)"
                        class="timeSlot"
                        :class="{'selected': current === test.id, 'light': current === test.id+1 || current === test.id-1, 'lighter': current === test.id+2 || current === test.id-2}"
                    >{{ test.time }}
                    </li>
                </ul>
    </div>