This demo comes from Chromium's source repository. See the original here.
The scrollable area represents 500 "virtual" items (kNumberOfItems
) using 30 "physical" DOM elements (kPhysicalCount
). As elements get scrolled out of view to the top, they get moved down to the bottom via -webkit-transform: translate3d(0, NNNpx, 0)
and their contents get replaced with the appropriate "virtual" item. requestAnimationFrame()
is used to ensure that updates only happen once per repaint of the window.