客服IM消息列表虚拟滚动技术实践

// 监听会话消息区域添加滚动监听事件
const listenScrollEvent = () => {
  chatMsgContainer.value.addEventListener('scroll', scrolHandle)
}


// 滚动逻辑处理回调函数
const scrolHandle = throttle(event => {
  const { scrollHeight, scrollTop } = chatMsgContainer.value || {}
  const { target } = event || {}
  // 记录下当前会话滚动位置，切换会话的时候需要回滚到最后停留的位置
  userInfo.value.scrollPosition = scrollHeight - scrollTop || 0
  // 超出一屏，滚动到顶部，且没有拉取完所有的数据
  if (
    target.scrollTop === 0 &&
    target.scrollHeight > target.clientHeight &&
    !userInfo.value?.isComplete
  ) {
    handleScrollEvent(event) // 拉取历史消息
  }
}, 300)

// 消息滚动
const handleMessageScroll = (len: number, oldLen: number) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
    // 获取到加载后最后一条数据位置
    const recentlyMsg = messagePools[len - 1]
    // 计算新加载数据条数
    const calcMsgLenDiff = len - oldLen
    // 首次加载数据的时候让滚动条滚动到最底部
    if (len <= LIMIT_MESSAGE) {
      // msgid是会话中的唯一标识，可以用此作为唯一ID
      targetDom = document.querySelector(recentlyMsg.msgid)
      // true 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}
      firstDom?.scrollIntoView?.(true)
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      // 这里用来处理用户/客服发送消息滚动逻辑
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // 拉取历史消息逻辑
      // 获取到加载前最后一条数据位置
      const prevLastMsg = messagePools[calcMsgLenDiff - 1]
      targetDom = document.querySelector(prevLastMsg.msgid)
      targetDom?.scrollIntoView?.()
    }
    userInfo.value.isShowLoading = false
  })
}


// 监听会话消息数据变化
watch(
  () => messagePools.length,
  (len, oldLen) => {
    handleMessageScroll(len, oldLen)
  },
  {
    immediate: true
  }
)

// 消息滚动
const handleMessageScroll = (len: number, oldLen: number) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
    // 获取到加载后最后一条数据位置
    const recentlyMsg = messagePools[len - 1]
    // 计算新加载数据条数
    const calcMsgLenDiff = len - oldLen
    // 首次加载数据的时候让滚动条滚动到最底部
    if (len <= LIMIT_MESSAGE) {
      ...
      // 针对图片/视频渲染慢的场景做个补偿
      msgScrollTimer = setTimeout(() => {
        clearTimeout(msgScrollTimer)
        firstDom?.scrollIntoView?.(true)
      }, SCROLL_THRESHOLD)
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      // 这里用来处理用户/客服发送消息滚动逻辑
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // 拉取历史消息逻辑
      // ...
      // 针对图片/视频渲染慢的场景做个补偿
      msgScrollTimer = setTimeout(() => {
        clearTimeout(msgScrollTimer)
        targetDom?.scrollIntoView?.()
      }, SCROLL_THRESHOLD)
    }
    userInfo.value.isShowLoading = false
  })
}

const allImgOrVedioLoaded = async() => {
  const imgNodes = document.querySelectorAll('.messageWrapper img') || []
  const vedioNodes = document.querySelectorAll('.messageWrapper vedio') || []
  const promises = [...imgNodes, ...vedioNodes]
  // 等待所有的资源加载完成，无论成功还是失败
  return await Promise.allSettled(
    promises.map(source => {
      new Promise(resolve => {
        source.addEventListener('load', () => resolve(source))
      })
    })
  )
}
// 消息滚动
const handleMessageScroll = (len: number, oldLen: number) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
        ...
      // 等待img/vedio所有资源加载完成，执行回滚操作
      allImgOrVedioLoaded().then(() => {
        firstDom.scrollIntoView(true)
      })
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      // 这里用来处理用户/客服发送消息滚动逻辑
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // 拉取历史消息逻辑
      // ...
      // 等待img/vedio所有资源加载完成，执行回滚操作
      allImgOrVedioLoaded().then(() => {
        targetDom.scrollIntoView()
      })
    }
    userInfo.value.isShowLoading = false
  })
}

display: flex;
flex-direction: column-reverse;