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

Question

当使用 Google 阅读器并在“展开” View 中浏览 RSS 条目时，一旦一定比例的 div 在屏幕上可见，条目将自动标记为“已读”(很难说出必须在谷歌阅读器的情况)。因此，当我逐行向下滚动时，javascript 代码可以确定 a) 条目正在可见窗口中呈现和 b) 一定数量是可见的，当满足这些条件时，状态切换为读取.

有人知道该功能是如何实现的吗？具体来说，这里有人知道如何判断 div 是否已滚动到 View 中以及有多少 div 可见吗？

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

Answer 1

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

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