如何确定溢出的<div>中哪些元素可见

Question

基本上,我正在尝试实现一个与Google Reader界面中内置的阅读窗格类似的系统.

如果您还没有看到它,Google阅读器会在单独的框中显示每篇文章,当您滚动它时会突出显示当前框(并将文章标记为已读).除此之外,您还可以通过单击UI中的上一个和下一个按钮在文章列表中向前或向后移动.

我基本上已经弄明白了如何完成大部分功能.但是,我不确定如何确定可滚动窗格中当前可见的div中的哪些div.

我有一个设置为溢出的div:auto.在这个div的内部,还有其他div,每个div都包含一段内容.我使用了以下jquery插件,只需单击"下一个"或"上一个"按钮即可进行所有滚动,它就像一个魅力:

http://demos.flesler.com/jquery/serialScroll/

但我无法分辨哪个div在可滚动窗格中具有"焦点".我希望能够做到这一点有两个原因.

1. 我想突出显示用户当前正在阅读的项目(类似于Google阅读器).我需要这样做,无论他们是否使用插件到达那里或使用浏览器的滚动条.

2. 我需要能够告诉插件哪个项目具有焦点,以便我滚动到"下一个"窗格的调用实际上使用当前查看的窗格(而不仅仅是插件滚动的前一个窗格).

我试过做一些搜索,但我似乎无法找到一种方法来做到这一点.我找到了很多方法来滚动到一个特定的项目,但我找不到一种方法来确定哪个元素在溢出的div中可见.如果我可以确定哪些项目是可见的,我可以(可能)弄清楚剩下的.

如果有帮助的话,我正在使用jquery.谢谢!

Answer 1

您可以确定每个div与可滚动区域顶部的偏移量,然后将其与滚动可滚动区域的数量进行比较.

$('#scrollableDiv').scroll(function() {
    var areaHeight = $(this).height();

    $('.innerDiv').each(function() {
        var top = $(this).position().top;
        var height = $(this).height();

        if (top + height < 0)
            console.log('this div is obfuscated above the viewable area');
        else if (top > areaHeight)
            console.log('this div is obfuscated below the viewable area')
        else
            console.log('this div is at least partially in view');
    });
});

如果更多的那个div在视图中,那么我将选择具有最小offset变量值的那个,因为这将是第一个(或最高的).