If the page isn't infinitely tall, but instead has a known (but very tall height), having an invisible page element hundreds of thousands of pixels tall makes the scrollbar work perfectly. What content to load is determined based on the scroll position.
It also works well to let users jump halfway through a large page, or scroll through a large list faster than the content can be generated. In my implementation, I have some text that pops up (like the alphabet letter that pops up on android when scrolling quickly) with the date so that the user can scroll fast.
Note that you also need to remove elements from the DOM that are offscreen (typically above the current position) so that you don't cause the page to be too heavy.
I have a photo gallery where the search results can be viewed this way. Even with hundreds of thousands of search results, this approach works very smoothly.
I know exactly how many search results the page will have. The images are square and 200px by 200px. I display them tiled. Based on the window size I can calculate how many pixels tall to make the invisible element.
Things unfortunately get more complicated if you allow children of varying heights. Then, in order to know what content should be visible at a particular scroll position, you must first fetch and lay out all content that appears above it. Or cheat by storing that information in a cache somewhere.
I have tried a similar technique and discovered browser limitations in the millions or tens-of-millions pixel height range (depending on the browser), for a scrollable div. Chrome, Safari, and Firefox all refuse to add scrollable height beyond a certain limit, even when the content is taller. Have you run into the same limitations?
The site where I had all the photos needs them to be reimported at the moment, so I can't check, but I estimate it was at least 8 million pixels tall. Instead of putting the photos IN the div, I just used the div to make the page tall. It was 1px wide and 8,000,000 pixels tall. If there is some limitation, you could have multiple divs of a million pixels each, or you could set the height of the body tag.
The problem is you don't want to generate all the DOM nodes with a long list, ideally you want to have only the visible ones created.
On iOS for example, the default implementation of table, UITableView does this by reusing cells which are no longer in view to show new cells.
On web, there are some libraries that do this (airbnb had one I think, implementations for react, angular etc can be found too) but there is no clear winner.
It also works well to let users jump halfway through a large page, or scroll through a large list faster than the content can be generated. In my implementation, I have some text that pops up (like the alphabet letter that pops up on android when scrolling quickly) with the date so that the user can scroll fast.
Note that you also need to remove elements from the DOM that are offscreen (typically above the current position) so that you don't cause the page to be too heavy.
I have a photo gallery where the search results can be viewed this way. Even with hundreds of thousands of search results, this approach works very smoothly.
I know exactly how many search results the page will have. The images are square and 200px by 200px. I display them tiled. Based on the window size I can calculate how many pixels tall to make the invisible element.
The relevant code is https://github.com/jewel/hypercheese/blob/master/app/assets/.... I've been meaning to extract this out and make it a separate library, and also create a demo page.