vue实现数据上下滚屏效果

需求：实时数据滚屏效果，数据5s请求一次
实现：
思路：分两种情况：1、数据无溢出，即没有滚动条效果时，不处理滚屏效果
2、数据有溢出，处理滚屏效果
方案：
关键词：scrollTop //当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。
offsetHeight : //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
scrollHeight //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
具体参数了解参见https://www.cnblogs.com/mycognos/p/9131180.html
代码：

//方法
   autoScroll() {
      const element = document.getElementById("warningList");
      // 元素内容没有溢出时，不触发
      if (element.offsetHeight !== element.scrollHeight) {
        if (this.interval) {
          clearInterval(this.interval);
        }
        element.scrollTop = this.scrollTop; //重新赋值，初始值为0
        this.interval = setInterval(() => {
          if (
            element.scrollTop ===
            element.scrollHeight - element.offsetHeight
          ) {
            // 触底
            element.scrollTop = 0;
          } else {
            element.scrollTop += 1;
            this.scrollTop = element.scrollTop;
          }
        }, 100);
      }
    }
    //调用
      setTimeout(() => {
        this.soeAjaxCon();
      }, 5000);