需求:实时数据滚屏效果,数据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);  
Logo

前往低代码交流专区

更多推荐