Hacker News new | ask | show | jobs
by splatzone 5036 days ago
Anyone care to explain how this works? It can't just be an endless array of divs, can it?
4 comments

Sort of.

There is an endless array of divs which is absolutely positioned, ie:

<div id="container" style="top: -2920px"> <!-- endless array of divs --> </div>

The actual scrolling is performed by a 'dummy' div, has the same overflow. Some javascript will be listening to scroll events on this div, and updating the position of the above div.

This is typically done as scrolling 'floating' images on most browsers isn't smooth, & to 'jump' the scroll the correct amount to achieve the effect.

It's not just an endless array of divs because then the grid lines would constantly be shifting (that is, unless your browser happens to scroll in increments that are exactly equal to the height of one of the cells).
They were constantly shifting to me. I was able to get it so that they were barely shifting, but the best I could do made it look like the images were ever so gradually drifting upwards due to a slight mismatch.
viewing the source seems to indicate that it is, in fact, just an endless array of divs.

(disclaimer: I don't actually know any html, just how to click 'view source' in Chrome)

"I don't actually know any html, just how to click 'view source' in Chrome"

That's a bit strange for someone that visits hacker news!

Then let this be the moment where you realize not everyone on HN is a web developer.

Some of them are painters.

...and some are saxophonists.