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?

Selfconfessed

there are a ton of plug for this now adays, just google. Generally its done like FaceBook, where, when user scrolls to bottom, an ajax call grabs next however much of content and post it in at bottom of body – Basseterre

"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." Couldn't agree more. – Chlamydospore

+1. I would suggest checking User Experience for more insights on this. – Saskatchewan

Or you could make your scroll div large, overflow:scrolley and empty at the bottom. – Pily

Some possible confusion about my planned solution: I want to take the current div that has my content and the vertical scroll bar that get's resized, and basically fill the end of it with blank lines (or something to expand the size of the scrollable content area). – Selfconfessed

Why not make the div containing the content have a min-height, and then if the content does overflow, it will automatically expand... Also prevents having to resize a div below, and is a pure CSS solution! – Heiser

Answer 1

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/

Selfconfessed

I haven't looked at your solution yet, but +1 for solving it yourself, documenting it, and sharing your solution! – Ejaculation

Answer 2

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.

Bushmaster

Yes, but how do you think you can make a custom scrollbar? – Eurystheus

Implementation wasn't part of the question ;-D. Simplest way would be flash/silverlight/java. In plain js/html/css you would probably need to create the scrollbar elements as div's and programatically track/adjust the whole thing. – Bushmaster

Okay, I think I just interpreted the question differently! +1! – Eurystheus

Answer 3

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>');

Rebhun

Although not conceptually a different solution than what I had considered doing, I decided to choose this, as it does improve upon my initial thought by saving me from filling in garbage data, saving memory. – Selfconfessed

You're welcome… the simplest solutions are always the best! :) – Rebhun