检测在窗口中呈现的div以实现类似Google-Reader的自动标记为已读？

Question

当使用Google Reader并在“展开”视图中浏览RSS条目时，一旦屏幕上显示一定百分比的div，条目将自动标记为“已读”(很难判断在Google Reader中必须显示多少百分比)。因此，当我逐行向下滚动时，javascript代码可以确定a)条目正在可见窗口中呈现，b)一定数量的条目是可见的，当满足这些条件时，状态切换为可读。

有谁知道这个特性是如何实现的吗？具体地说，在座的任何人都知道如何判断div是否已经滚动到视图中，以及div有多少是可见的？

顺便说一句，我使用的是jQuery，所以如果任何人有任何特定于jQuery的例子，他们将不胜感激。

Answer 1

真正的诀窍是跟踪滚动条在包含项目的元素中的位置。下面是我曾经使用过的一些代码：http://pastebin.com/f4a329cd9

您可以看到，当您滚动它时，它会改变焦点。您只需向处理每个焦点更改的函数添加更多处理程序代码。它可以在两个方向上滚动，也可以通过在滚动条上单击右键，这是简单的鼠标跟踪不会给你的(尽管在这种情况下，因为示例元素都是相同的大小，使用相同的文本，很难判断它确实已经滚动了)。另一个问题是当容器触底时该怎么办。我现在的解决方案只在FF中有效。如果你想让它在IE中看起来更漂亮，你必须使用一个混合到背景中的虚拟元素，就像我在代码中注释掉的那个一样。

Answer 2

我只是偶然发现了这一点，因为我需要同样的东西，它看起来非常有用：

http://www.appelsiini.net/projects/viewport

Answer 3

根据我的经验，Reader只会在我用鼠标移动或点击的情况下才会将它标记为已读。假设当你滚动鼠标时，你的鼠标在div上(当我滚动时，我倾向于将鼠标放在屏幕的右边)，这可以解释为什么只有当显示了某个%时，它才会被标记出来。

然而，我可能是错的(很可能是错的)。我只知道在reader中滚动浏览我的项目并不会将它们标记出来。我必须确保鼠标在鼠标滚动时移动到它们上面。