javascript - 在 iGoogle 上设计一个像谷歌阅读器一样的无限滚动小部件

Question

你有没有想过如何在 iGoogle 上实现一个像 google reader 这样的无限滚动小部件，它动态加载数据，滚动条被一对向上和向下箭头代替。

我有一个这样的 html 结构:

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

我试图在这个 div 中进行无限滚动，做这样的事情:

$(".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
});

但是 :( 隐藏垂直滚动条似乎禁用了滚动事件处理程序。

现在最让我困惑的是如何隐藏滚动条并保持滚动事件的处理。

请告诉我我的实现可能有什么问题。

提前致谢。 alt text http://img2.douban.com/view/photo/photo/public/p439408255.jpg

Answer 1

嗯，有两个方面...

1) 无限滚动

这是一个基本的 AJAX 实现。当您检测到最后几个元素在可视区域中时，您会发出 AJAX 请求以获取下一个“n”个元素以添加到列表底部。

2) 用向上/向下箭头替换滚动条。

这将涉及使用 CSS 规则“溢出:隐藏；”在容器上以确保不显示滚动条。然后，您将添加到向上/向下的图像，并在点击事件中更改容器的滚动位置。

如果您遇到困难，请随时展示您的进度/遇到的困难。如果你只是想让别人给你写，我就得收钱了! (或者确实是开源工作——就像我在这里所做的那样……)

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