【vue】控制聊天室页面滚动到底部（备份）

// 滚动到消息底部
export const scrollMsgBottom = (initial = true) => {
  // 处理更新消息的情况 更新消息只需判断最新的消息为图片还是文本
  // 如果为图片则监听当前图片加载完成再滚动到底部 否则直接滚动到底部
  if (!initial) {
    // 获取所有消息元素
    const list = document.querySelectorAll('.room-page .msg')
    // 获取最后一条消息元素
    const el = list[list.length - 1]
    // 判断最后一条消息是否为图片 为图片则更新
    const img = el.querySelector('.content img')
    if (img) {
      ;(img as HTMLImageElement).onload = () => {
        window.scrollTo(0, document.body.scrollHeight)
      }
    } else {
      console.log('文本')
      window.scrollTo(0, document.body.scrollHeight)
    }
    return
  }
  // 处理初始化消息的情况  初始化消息时 等待页面所有图片资源全部加载完成再滚动到底部
  // 获取聊天记录所有图片资源
  // // 获取聊天记录中的所有图片 并转化为真数组
  const arr: HTMLImageElement[] = Array.from(
    document.querySelectorAll('.room-page .msg .content img')
  )
  // arr [img,img,xxx] => newArr [promise,promise]
  const newArr = [...arr].map((img: HTMLImageElement) => {
    // 每一项为一个promise
    return new Promise((resolve, reject) => {
      // 监听图片加载完成事件
      img.onload = () => {
        console.log('加载了')
        // 图片加载完成后 让promise状态变为成功态
        resolve(true)
      }
      // 监听图片加载失败事件 让promise变为失败状态
      img.onerror = () => reject(false)
    })
  })
  // Promise.all([promise,promise]) 所有成功才成功 只要有一个失败就失败  商品分类 一级分类 二级分类
  // Promise.allSettled([promise,promise]) 不管成功还是失败都成功 只要promise状态不为pending状态就行 都会成功
  Promise.allSettled(newArr).then(() => {
    console.log('搞完了')
    // 聊天记录中的图片加载完成后 滚动到底部
    window.scrollTo(0, document.body.scrollHeight)
  })
}

Promise.allSettled() - JavaScript | MDN (mozilla.org)