I am writing a book viewer that dynamically loads content as the user scrolls down to it. The first problem I’m having is how to set up the scrollbar. Since we only store paragraphs in our database with no size information, I can only guess how long the document is. Based upon such a guess, I may want to create a scrollable window that appears 10,000 pixels long and loads paragraphs as needed.
The simplest way I can think is to actually create a DIV that is 10,000 pixels long and absolutely position an embedded div at the scroll position showing my content.
Is there a way to totally control the scrollbar under Javascript (setting its min, max, position, relative thumb size) or do I go the simple way mentioned above or is there another way to do this?
I am using ExtJS framework but it does not seem to offer any direct help there, though V4 does include an infinite grid.
The other answers to this question simply extended the content as the user reached the bottom, this is not what I was after. I need to display a fully sized, but sparsely populated, scrollable region. The solution I came up with was pretty simple:
I created a scrollable DIV (call it book) with a set of inner DIVs for each paragraph in the book. I need to do it by paragraph as this has special meaning in our application, otherwise, you’d probably do it by page. The paragraph DIVs have a default size based upon a guess of how big they are.
When the book DIV is scrolled, the javascript calculates which paragraph DIVs are now visible. Those that are visible but are not populated are bundled together. A web service is then used to populate the required paragraph DIVs and accurately size them.
The algorithm I use bundles some surrounding (not not-visible) paragraphs to give some read ahead and chunking efficiencies. A lazy loader reads further paragraphs once the screen has been updated to further aid smooth scrolling.
This turned out too be very simple. The hard work is in the chunking algorithms and adding a lazy reader.