Optimizing Pull‑Down Loading and Scroll Experience in IM Chat Message Lists

In an instant‑messaging (IM) system, the core event is the "chat". Chat messages constitute the conversation history, and loading historical messages efficiently is crucial for a good customer‑service experience.

Because chat windows have limited space, virtual scrolling is used to render only the visible portion of the list. On mobile, this involves pull‑up loading, pull‑down loading, and pull‑down refresh. Selecting the appropriate technique is a key discussion point.

Virtual‑scroll research

Virtual scrolling is suitable for pages with small layout space where pagination is inconvenient, such as mobile list pages, IM conversation lists, and order/product query lists. Pull‑up loading fits order/product lists, while pull‑down loading is needed for conversation message lists.

Comparison of loading/refresh techniques

Technique

Trigger

Scenario

Key challenges

Pull‑down loading

Scroll to top

Conversation message list

Accurate rollback positioning and handling image/video impact on scroll

Pull‑up loading

Scroll to bottom

Order/product list, mobile list pages

Calculate bottom position; smoother visual experience

Pull‑down refresh

Drag top down a certain distance

H5 page refresh

Implement rubber‑band effect and trigger page reload

The focus of this article is the application and experience optimization of pull‑down loading in IM conversation messages.

Pull‑down loading flow

Three steps are involved:

User scrolls to the top, triggering a loading indicator.

Returned data is inserted at the beginning of the array (e.g., array.unshift(newArray) ), pushing existing content down.

The view is scrolled back to the position of the last message before loading.

Implementation details

Listen to the scroll event of the message container:

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) // fetch historical messages
  }
}, 300)

Watch message array changes to adjust scroll position:

watch(() => messagePools.length, (len, oldLen) => {
  handleMessageScroll(len, oldLen)
}, { immediate: true })

const handleMessageScroll = (len, oldLen) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
    const recentlyMsg = messagePools[len - 1]
    const calcMsgLenDiff = len - oldLen
    if (len <= LIMIT_MESSAGE) {
      // first load, scroll to bottom
      firstDom?.scrollIntoView?.(true)
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // load historical messages
      const prevLastMsg = messagePools[calcMsgLenDiff - 1]
      targetDom = document.querySelector(prevLastMsg.msgid)
      targetDom?.scrollIntoView?.()
    }
    userInfo.value.isShowLoading = false
  })
}

Three optimization schemes were evaluated for accurate rollback when images or videos load slowly:

setTimeout delay rollback – simple but can cause flicker and unreliable positioning.

Listen to img/video onload events – more precise but may introduce many DOM queries.

Reverse rendering (flex‑direction: column‑reverse) – mimics pull‑up loading, eliminating the need for rollback.

Example of reverse rendering CSS:

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

All three solutions have trade‑offs; the reverse rendering approach was chosen for its smooth experience without extra rollback logic.

Result

The optimized pull‑down loading improves performance and user experience in IM conversation lists, especially when combined with virtual list techniques to minimize DOM rendering.

In summary, the article analyzes pull‑up, pull‑down, and pull‑down refresh techniques, proposes three solutions for precise rollback in pull‑down loading, and shares practical code snippets for implementation.