0

我想在用户滚动并到达某个元素时触发一个函数，以便我可以将该元素标记为“已读”（想想在现已失效的 Google Reader 中查看帖子后如何将它们标记为已读）。因此，例如，想象一个如下所示的页面：

<div id="1">Node 1</div>
<div id="2">Node 2</div>
<div id="3">Node 3</div>
<div id="4">Node 4</div>

假设只有前两个<divs>适合视口，我想使用 Dojo 的事件侦听器并在 div 3 进入视图时触发一个事件，并在 div 4 进入视图时再次触发一个事件。（除了我在读取元素时记录的目标之外，这还可以让我轻松实现无限滚动。）

jQuery Waypoints工具似乎完全符合我的要求，但由于我的大部分代码都使用 Dojo，我真的不想只为这一项任务使用 jQuery。我想找到一个预先编写的工具或简单的方法来执行此操作，它不依赖于 Dojo 以外的库/工具包（我可以使用 Dojo 或根本不使用库）。

更新：似乎Skrollr也可以满足我的要求，但仅适用于动画——也就是说，它可以根据元素与视口的关系为元素设置动画。但是，这并不完全有帮助，因为我的目标不是动画，而是在元素进入视点时激活一个函数（这将通过 Dojo 进行 AJAX 调用）。

4

1 回答 1

0

感谢朋友的一些建议，我能够为这个问题提出一个功能性的解决方案。假设所有的 div 都在另一个具有 id 文章的 div 中，当用户将元素的底部滚动到视口中至少 50px 时，我然后将“读取”类应用于元素。

    posts = dojo.query("#articles > div");

    dojo.connect(window, 'onscroll', function(){
        var vs = win.getBox();

        var output;
        var readCount;

        for (var i = 0; i < posts.length; i++) {
            var includeScroll = false;
            var locInfo = domGeom.position(posts[i], includeScroll)
            var fullyOnScreen = locInfo.y + locInfo.h + 50;
            if ((fullyOnScreen > 0) && (fullyOnScreen < vs.h)) {
                //Apply "read" class to div if it has been scrolled to.

                domClass.add(posts[i], "read");             
            }
            if (locInfo.y > vs.h) {
                break;
            }
        }   


    });

剩下的问题：虽然这解决了我的目标，但我不确定每次用户滚动时轮询视口中或上方的每个 div 的位置是否最有效——甚至每个滚动事件多次。有没有办法提高效率？它似乎在我的 Core 2 Duo 系统上运行良好，但我不想仅仅因为它看起来不滞后而马虎。

我考虑过在启动时从绝对顶部计算所有 div 的位置，然后每次滚动时在视口和顶部之间进行一些比较。这可能会更有效，但我不确定效率的提高是否证明代码的复杂性是合理的。

于 2013-07-04T19:53:48.803 回答