Design an indefinite scroll widget like google reader on iGoogle

Question

Hi, all.

Do you have any idea how to implement an indefinite scroll widget like google reader on iGoogle, which loads data dynamically and the scroll bar is replaced with a pair of up and down arrows.

I have a html structure like this:

<div id="note_column">
    <ul class="messages">
        <li class="note">
            ....
        </li>
        .
        .
        .
    </ul>
</div>

And I tried to make indefinite scroll work inside this div, doing something like this:

$(".messages).wrap("<div id='scrollbox'></div>"); 
$("#scrollbox").css({
    'height': '50em',
    'overflow': 'scroll',
    'overflow-y': 'hidden'
}).scroll(function() {
    // judge if this is a scroll-to-bottom
    // load list items if it is so
});

However :( Hidding the vertical scroll bar seems to disable the scroll event handler.

What puzzles me most now is how to hide the scrollbar and keep the scroll event handled.

Please tell me what might be wrong with my implementation.

Thanks in advance.

Answer 1

Well, there are two aspects...

1) Infinite scroll

This is a basic AJAX implementation. When you detect that the last few items are in the viewable area, you make an AJAX request to get the next "n" items to add to the bottom of the list.

2) Replace scrollbars with up/down arrows.

This will involve using the CSS rule "overflow: hidden;" on the container to ensure no scrollbars are show. You then add to images for up / down and on the click event you change the scroll position of the container.

If you get stuck, please feel free to show how far you have got / what you are stuck on. If you just want someone to write it for you, I would have to charge a fee! (Or indeed open source the work - as I have done here...)

http://plugins.jquery.com/project/infinitescroller

Answer 2

Check this tutorial - http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/