记录---vue列表自动在可视区域范围

代码结构：就是一个聊天框，分为左右结构，利用scrollIntoView

 <ul class="infinite-list" v-infinite-scroll="load" style="overflow: auto">
        <li v-for="(i, index) in lists" :key="index" ref="listLi“>
        </li>
 </ul>
  <div class="chat-input">
      <textarea v-model="inputValue" rows="3" cols="20"  placeholder="欢迎咨询～"   
      @input="onFocusInput"
      @keydown="keyCodeDown"
      />
      <button ref="btn" @click="send">发送</button>
    </div>

在输入框中输入字符后，按下回车或者点击发送按钮 在vue中：

keyCodeDown(event) {
      if (event.keyCode === 13) {
        this.send();
        event.preventDefault();
      }
    },
send() {
      let content = this.inputValue;
      this.lists.push(
        { content, name: "测试2", id: 1 },
        {
          content: "jjjj",
          name: "dddd",
        }
      );
      this.$nextTick(() => {
        let leg = this.$refs.listLi.length;
        this.$refs.listLi[leg - 1].scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "end", // 下边框与视窗底部平齐
        });
      });
    }