Javascript “infinite” scrolling for finite content

Question

I have a lot of content to display on a website, such that I need to use an "infinite" scroll solution where content is loaded as the user scrolls towards the end of the currently loaded content. However, I know exactly how much data there is, and I want the user to have some understanding of that. I don't like how the scroll bar makes it looks like you're almost to the end of the content, and then suddenly more content is loaded and the thumb/slider is in the middle of the scrolling track and narrower.

My planned solution is to make a div after the current content that is huge, but empty, and then shrink it as I load more content. Any better ideas?

Answer 1

You can insert an inconspicuous character at the very end of your maxed document (say at 15k pixels) so that the scroll bar will accurately reflect the depth of the page if that's what you meant. Something like this…

 document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');

Answer 2

My final solution has been to create a table within the div that has the scroll bar. I set the table's height to the height of the total amount of content, and the first row to the height of the portion of the content that is not being viewed, and the next row is the content being looked at currently.

I then used a process much like that used in side-scrolling video games where you only draw what is visible on the screen, or only what is near the visible area. I leveraged waypoints to keep track of where the user was scrolling to, and then refreshed the visible content and used jquery scrollto functionality to keep the user at the same spot they were viewing. So at any point only about a page worth of content is "displayed" above or below the current viewing area.

I should note that all of the "content" is actually already on the client's system, so downloading is not the issue. The issue for me is that the "content" is a massive DOM structure that ends up slowing down the client's system horribly if I try to handle it all at once. So I only create and display part of it at a time.

This does result in some choppiness as the screen get's refreshed and badness if you decide to grab and drag the scroll bar to the bottom of the content. If I figure out something better, I'll update this.

UPDATE I documented how to do this on my site: http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

Answer 3

When you design a UI element, the first thing you have to ask is what do you want an end-user to actually experience. You're solution will make it look like a ton of data is there that is not yet there (and if it's older/archive stuff it may not be relevant to the user). That could put a user off from reading the content at all because it looks too long.

The problem is the scrollbar is not designed to support expanding content. It is, as you pointed out, deceptive for such content. You could design an entirely new scroll feature which provides complete information

1. The length of the loaded data
2. The length of unloaded data available
3. If you download archive data, you may want to separately indicate what part of the loaded data is current data

A colored scrollbar with a green background indicating what is loaded and current, a yellow section indicating what is loaded but older data, and a red section indicating what can be downloaded as the user scrolls would do this quite well.