vue3 聊天室 滚动到最底下的聊天

            <div ref="chatContent" class="count"> 
                <ul>
                  <li v-for="(i, index) in 20" :key="index"> 
                      <!-- 聊天内容 -->
                  </li>
                </ul> 
            </div>

.count{
      height: 外壳高度;
      overflow-y: scroll;
}

// 滚动到底部
const chatContent = ref(null) //装会话的容器
const isScrolling = ref(false) //用于判断用户是否在滚动
function scrollToBottom() {
  nextTick(() => {
    //注意要使用nexttick以免获取不到dom
    if (!isScrolling.value) {
      chatContent.value.scrollTop = chatContent.value.scrollHeight - chatContent.value.offsetHeight
      console.log(chatContent.value.scrollTop)
      console.log(chatContent.value.scrollHeight)
      console.log(chatContent.value.offsetHeight)
    }
  })
}
function handleScroll() {
  const scrollContainer = chatContent.value
  const scrollTop = scrollContainer.scrollTop
  const scrollHeight = scrollContainer.scrollHeight
  const offsetHeight = scrollContainer.offsetHeight
  if (scrollTop + offsetHeight < scrollHeight) {
    // 用户开始滚动并在最底部之上，取消保持在最底部的效果
    isScrolling.value = true
  } else {
    // 用户停止滚动并滚动到最底部，开启保持到最底部的效果
    isScrolling.value = false
  }
}

onMounted(async () => {
  await nextTick

  chatContent.value = document.getElementsByClassName('count')[0]

  scrollToBottom()
  // 监听滚动事件，判断用户滚动状态
  chatContent.value.addEventListener('scroll', handleScroll)
})

 

 

    setTimeout(() => {

      isScrolling.value = false

      scrollToBottom()

    }, 200)

//哪里需要滚动哪里就调用,例如发送消息后调用,进入页面调用可以滚动到底部