需求：添加item后自动滚动到容器底部(如果有滚动条)

大巧不工,用了原生js

<template>
  <div class="app-container">
    <div class="box">
      <div v-for="(item, index) in count" :key="index" class="item">
        {{ item }}
      </div>
    </div>
    <t-button @click="add">点击</t-button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      count: 5
    }
  },
  mounted() {
    this.handlerNodeScroll()
  },
  methods: {
    add() {
      this.count += 1
      // 监听滚动
      let box = document.querySelector('.box')
      this.$nextTick(() => {
        // 如果有滚动条，则滚动到底部
        if (box.clientHeight < box.scrollHeight) {
          box.scrollTop = box.scrollHeight
        }
        // box.scrollTop = box.scrollHeight
        console.log('this.hasVerticalScrollbar(.box) :>> ', this.hasVerticalScrollbar(box))
      })
    },
    hasVerticalScrollbar(element) {
      // 判断容器是否有垂直滚动条
      return element.scrollHeight > element.clientHeight
    },
    // 监听元素滚动
    handlerNodeScroll() {
      let that = this
      console.log('1111 :>> ', 1111)
      // 函数防抖
      let fun = that.debounce((e) => {
        // 距顶部
        let scrollTop = e.target.scrollTop
        // 可视区高度
        let clientHeight = e.target.clientHeight
        // 滚动条总高度
        let scrollHeight = e.target.scrollHeight
        // 如果当前距离顶部的值加上可视区域的值大于等于总高度，则任务滚动条触底
        console.log(
          'Math.ceil(scrollTop + clientHeight) >= scrollHeight :>> ',
          Math.ceil(scrollTop + clientHeight) >= scrollHeight
        )
        console.log('Math.ceil(scrollTop + clientHeight) :>> ', Math.ceil(scrollTop + clientHeight))
        console.log('scrollHeight :>> ', scrollHeight)
        if (Math.ceil(scrollTop + clientHeight) >= scrollHeight - 1) {
          //容差：20px
          console.log('滚动到底部')
          // if (that.count >= 50) return
          // that.count += 10
        } else {
          console.log('222 :>> ', 222)
        }
      }, 100)

      // 监听滚动
      let box = document.querySelector('.box')
      box.scrollTop = box.scrollHeight
      // box.addEventListener('scroll', function (e) {
      //   fun(e)
      // })
    },
    // 函数防抖
    debounce(handle, delay) {
      let timer = null
      return function () {
        let _self = this,
          _args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          handle.apply(_self, _args)
        }, delay)
      }
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 200px;
  max-height: 400px;
  border: 1px solid #7c7c7c;
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;

  .item {
    margin-bottom: 10px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #1482f0;
    font-size: 18px;
    font-weight: 700;
    color: white;
  }
}
</style>