Nick Darnell

2 minute read

One thing I continually find myself bumping up against is the situation where it would be nice to have smooth scrolling and virtualization.  Now as long as your list contains items that are all the same size, it’s pretty easy to solve.  For an example, check out Dan Crevier’s version of a virtualized wrap panel.

But what about if every item is a different size?

One idea I’ve been kicking around, but haven’t had a chance to prototype yet is a kind scrolling method that applies a separate density for each interval.

Step 1) If they’re scrolling via the mouse, just scroll by some number of pixels.  We can figure out where the scrollbar belongs after we figure out what item is at the top of the visible viewport of the list of items.

Step 2) Determine the known interval points on the scrollbar.  This works just like it does when smooth scrolling is disabled.  If there are 20 items in the list, there are 21 unique positions along the scrollbar each representing a single item, regardless of the height of the individual item.

Step 3) If the user scrolls with the scrollbar, we can use a variable density method of scrolling in between the known points once we’ve realized the item in the list.  Once an item has been realized we will be able to tell the actual height of the item in the list.  Once we know the real height, we can then divide the actual height of the item by the number of pixels separating each of the known points on the scrollbar we identified in step 2.  That gives us the amount to move in the viewport for each pixel we move along the scrollbar in between the two known points we’re currently in between.

Will this work great, or fail horribly?  No idea, but I’m thinking about trying it out some time.