Question

我想在用户滚动并到达某个元素时触发一个函数，这样我就可以将该元素标记为“已读”（想想在现在已经不存在的Google阅读器中查看帖子后如何标记这些帖子）。因此，例如，想象一下如下页面：

<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或根本没有库）

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

Answer 1

感谢朋友的一些指示，我能够为这个问题整理一个功能性解决方案。假设所有div都在id文章的另一个div中，当用户将元素的底部至少50px滚动到视口中时，我会在元素中应用“read”类。

    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的位置，然后在每次滚动时在视口和顶部之间进行一些比较。这可能会更有效，但我不确定效率增益是否证明了代码增加的复杂性。

找出Dojo中视口中的哪些元素

1 个答案: