21 / Scroll behaviour

Infinite Loop Scroll

The list has no end. Keep going and it carries on, with no seam to catch on.

also called endless scroll · recycled list · seamless wrap

The correction must happen in the same frame as the move or the seam shows as a jump. Done right the list has no beginning and no end — and the scrollbar stops telling you where you are, which is the price.

How it is built

el.append(el.firstElementChild); el.scrollTop -= rowHeight; /* same frame, or it jumps */