Virtual scroll is a performance technique used when displaying continuous content such as article lists. It renders only the content in the viewport (plus a small buffer). Content that would be off-screen until the user scrolls is not rendered; it appears as the user scrolls. Content that scrolls out of the viewport is removed from the DOM as well.
On the web, DOM rendering consumes memory, and large DOM trees hurt performance, so virtual scroll is a common optimization. Without it, scrolling through hundreds of thousands of items is often impractical.
For a deeper dive, see:
https://zenn.dev/yuma99313/articles/fb277c0a7cac5c
Virtual scroll is a battle with layout math
Virtual scroll is also a battle with height calculations. A simple example:
- Viewport height: 1,000px
- Render 100px above and below the viewport to avoid flicker while scrolling
- Each item is 50px tall
Then:
- The viewport shows 20 items
- The buffer adds 2 items above and below
- So 22 items are rendered in total
That math is straightforward and keeps browser work low. In practice, though, item height is rarely fixed. Look at the LINE chat screen: message height changes with message length. You cannot assume a fixed item height. Change the width and the number of characters per line changes, so height changes again. The browser cannot give you the true height until it renders, so you need per-item measurements—and running those in parallel gets expensive fast.
LINE's chat list design was impressively clever
First, take a look at this chat list.
In LINE's chat list, the latest message preview appears in gray on one or two lines. So in principle, item height should be variable. Change the width and line wrapping changes, which should change item height again.
In practice, though, the row height stays the same whether the latest message preview is one line or two. For a single-line preview, the row height does not shrink; instead, the room name and preview text are laid out with vertical-align: middle so extra vertical space does not look awkward. The date is different: it is positioned absolutely on the item so spacing stays even.
Seen only as design, you might stop at "maybe that was intentional." From a virtual scroll perspective, you notice:
- Keeping row height constant regardless of preview line count reduces calculation cost
- Fixed icon and date placement make even spacing feel natural
- Which implies the latest message preview cannot exceed two lines
That makes sense both in implementation and in design.
Summary
I do not know whether LINE's team chose this design with virtual scroll in mind. Still, if you implement virtual scroll yourself, this perspective is very useful. I hope it helps.
See you next time.