js下拉滚动条不能随着上下键进行翻页

vue前端写了个页面，在输入框输入搜索条件，然后把搜索出来的结果放在ul中，可是有一个问题，就是一直往下选择结果，到满一屏后，下一屏的结果不能显示在ul中，换言之，就是我的滚动条在上下键操作的时候不起作用，只有在拉动的时候才起作用。
想要达到的效果是：向下翻动到最后一条的时候，再往下翻，可以滚动到下一屏；向上翻动到第一条的时候，在网上翻，可以滚动到上一屏
ul及ul样式代码如下：

   <ul class="list-group" ref="box">
              <!-- <div style="height:200px;overflow:hidden" v-show="show1">
                <a-empty style="margin-top:33px"></a-empty>
              </div>-->
              <div>
                <div class="message" v-show="show1">暂无数据</div>

                <li
                  class="list-group-item list-group-item-text"
                  v-for="(item,index) in arr"
                  :key="index"
                  :class="{'bgc':index==listIndex ||  index==0&&listIndex==-1}"
                  @click="click($event,index)"
                  v-show="show2"
                  @mouseover="mouseOver($event)"
                  @mouseleave="mouseLeave($event)"
                >{
   
   {item.daName +' '+item.fullTableName+' '+item.columnNameCn}}</li>
              </div>
            </ul>



.list-group-item.list-group-item-text {
  padding: 5px 12px 5px 12px;
  list-style: none;
  line-height: 1.5;
  text-align: left;
  border-radius: 4px;
  cursor: default;
  /* clear: both; */
}
.list-group {
  overflow-y: scroll;
  max-height: 600px;
  width: 94%;
  padding: 0;
  margin-top: 3px;
  list-style: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  cursor: auto;
  position: absolute;
  z-index: 1;
  background-color: #fff;
}

自己百度了很久，没有找到方法怎么去操作这个滚动条，然后问了一下前端大佬，大佬教我首先获取到ul这个元素，然后使用scrollTop去计算（百度了一下，是通过控制scrollTop的值来实现自动滚动的效果的）
实现代码如下：

myScrollTop(type) {
      var myScrollHeight = document.getElementsByClassName('list-group')[0];
      //使用listIndex 记录数组的index
      if (!this.listIndex == 0 && this.listIndex % 18 == 0) {
        var n = this.listIndex / 18;
        // this.$nextTick(() => {
        if (type == 0) {
          //向下事件
          myScrollHeight.scrollTop = 37 * 15 * n;//这里的数据是根据条数和一条数据的高来计算的
          console.log(myScrollHeight.scrollTop);
        } else {
          myScrollHeight.scrollTop -= 37 * 15;
          console.log(myScrollHeight.scrollTop);
        }
        // });
      }
    },