Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows.
The HTML structure I am working with looks like this:
<div id="note_column">
<ul class="messages">
<li class="note">
....
</li>
.
.
.
</ul>
</div>
I attempted to implement the infinite scroll functionality within this div using the following code snippet:
$(".messages).wrap("<div id='scrollbox'></div>");
$("#scrollbox").css({
'height': '50em',
'overflow': 'scroll',
'overflow-y': 'hidden'
}).scroll(function() {
// Check if user has scrolled to the bottom
// Load new list items if needed
});
Unfortunately, by hiding the vertical scroll bar, it appears that the scroll event handler is being disabled.
I am currently puzzled about how to hide the scrollbar while retaining the functionality of the scroll event handler. If you have any insights or suggestions regarding my implementation, please share them with me.
Thank you in advance. alt text http://img2.douban.com/view/photo/photo/public/p439408255.jpg