vue2项目中滚动的自动和停止

一、直接上代码

<div ref="chatScroll" class="leftReturn">
 里面好多的内容，这个有滚动条</div>

 container: null,
 isUserScrolling: false, //用户是否手动滚动页面
 scrollFlag: false,

//使用
 that.chcekScroll();
 that.executeScroll(true 或者 false);

 updated() {
    if (!this.container) {
      this.container = document.querySelector('.leftReturn');
    }
  },
  beforeDestroy() {
    if (this.container) {
      this.container.removeEventListener('scroll', () => {
        if (this.isUserScrolling) {
          this.scrollFlag = true;
        } else {
          this.scrollFlag = false;
        }
      });
      this.container.removeEventListener('wheel', () => {
        this.isUserScrolling = true;
      });
    }
  },

//  判断是否滚动
  chcekScroll() {
    this.isUserScrolling = false;
    this.container.addEventListener('scroll', () => {
      if (this.isUserScrolling) {
        this.scrollFlag = true;
      } else {
        this.scrollFlag = false;
      }
    });
    this.container.addEventListener('wheel', () => {
      this.isUserScrolling = true;
    });
  },
  // 输入内容执行滚动效果
  // scrollFlag:是否执行滚动 true:是，false:否
  executeScroll(scrollFlag) {
    if (scrollFlag) {
      this.$refs.chatScroll.scrollTop =
        this.$refs.chatScroll.scrollHeight - this.$refs.chatScroll.clientHeight;
    }
  },