检测窗口中呈现的div，以实现类似Google-Reader的自动标记读取？ [英] Detecting divs as rendered in the window to implement Google-Reader-like auto-mark-as-read?

问题描述

在扩展视图中使用Google阅读器和浏览RSS条目时，一旦在屏幕上显示div的某个百分比，条目将自动标记为已读（很难分辨出哪些百分比必须在谷歌阅读器的情况）。因此，当我逐行向下滚动时，javascript代码可以确定a）条目在可见窗口中呈现并且b）某个量是可见的，并且当满足这些条件时，状态被切换为读取。

When using Google Reader and browsing RSS entries in the "Expanded" view, entries will automatically be marked as 'read' once a certain percentage of the div is visible on the screen (difficult to tell what percentage has to be visible in the case of Google Reader). So, as I scroll down line-by-line, the javascript code can determine that a) the entry is being rendered in the visible window and b) a certain amount is visible and when those conditions are met, the state is toggled to read.

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

Does anyone have any idea how that feature is implemented? Specifically, does anyone here know how to tell if a div has scrolled into view an how much of the div is visible?

顺便说一下，我正在使用jQuery，所以，如果有人有任何jQuery特定的例子，他们将非常感激。

As an aside, I'm using jQuery, so if anyone has any jQuery-specific examples, they would be much appreciated.

推荐答案

真正的诀窍是跟踪哪里滚动条位于包含项目的元素中。以下是我曾经做过的一些代码： http://pastebin.com/f4a329cd9

The real trick is to keep track of where the scrollbar is in the element containing your items. Here's some code I once whipped up to do it: http://pastebin.com/f4a329cd9

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

You can see that as you scroll it changes focus. You just need to add more handler code to the function that handles each focus change. It works scrolling in both direction, and also by clicking right on the scrollbar, which simple mouse tracking won't give you (though in this case since the example elements are all the same size, with the same text, it's hard to tell that it has indeed scrolled). The other issue is what to do when the container bottoms out. The solution I have right now only works in FF. If you want to have it look nice in IE, you'll have to use a dummy element that blends into the background, like the one I have commented out in the code.

这篇关于检测窗口中呈现的div，以实现类似Google-Reader的自动标记读取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！