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?

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?

• javascript
• jquery
• scroll
• infinite-scroll

• 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 – SpYk3HH Commented Nov 11, 2012 at 21:11
• 10 "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. – j08691 Commented Nov 11, 2012 at 21:12
• 1 +1. I would suggest checking User Experience for more insights on this. – Aamir Commented Nov 11, 2012 at 21:13
• Or you could make your scroll div large, overflow:scrolley and empty at the bottom. – user1726343 Commented Nov 11, 2012 at 21:14
• 1 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! – ahren Commented Nov 11, 2012 at 21:26

3 Answers 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 plete 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.

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./2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

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