自制的datetime picker，求教这个滚动条按格滑动的原理

Question

1、底部弹出了这个控件之后，样式我写好了。但是最终校正到行的整数倍比较粗略。
2、目前我是3个竖行，3个div。
比如第一个竖行日期是

<div class="date-con" style="width: 34%;" id="date_con" @scroll="reviseScroll('date_con')">
    <ul>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>明天</li>
      <li>01月19</li>
      <li>01月20</li>
      <li>01月21</li>
      <li>01月22</li>
      <li>01月23</li>
      <li>01月24</li>
      <li>01月25</li>
      <li>01月26</li>
      <li>01月27</li>
      <li>01月28</li>
      <li>01月29</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
    </ul>
  </div>

样式是：

.date-con {
    width: 33%;
    height: 182px;
    z-index: 2;
    overflow-y: auto;
    ul li {
      margin: 0;
      padding: 0;
      height: 36px;
      font-size: 20px;
      text-align: center;
    }
  }

目前粗糙的js

methods: {
      reviseScroll(id) {
        let con = document.getElementById(id);
        var eachHeight = 36; //每一行的高度
        setTimeout(() => {
          let temp = parseInt((con.scrollTop / eachHeight).toFixed(1).split(".")[1]);//得到小数点第一位
          let idx = 0;
          if (temp >= 7) {//下一行冒得比较多，就取用下一行的scrollTop
            idx = Math.ceil(con.scrollTop / eachHeight);
          } else {//取上一行的scrollTop
            idx = Math.floor(con.scrollTop / eachHeight);
          }
          con.scrollTop = idx * eachHeight;
        }, 1000);
      }
    }

3、我现在写的临时的demo，就是整数倍行高控制容器的scrollTop，并简单校正了一下。能实现效果，但是最后如果需要校正，校正的时候会突然抖动一下。我想请问一下，怎么实现会比较优化一些，比如用户点滑动之后，就得到最终的行高的整数值，让它滚动到那个位置。而不是我现在这样最后来校正。

只需要给我说说原理，我自己去实现。请教各位了，不胜感激。