Question

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

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

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

我有一个设置为溢出的div：auto。在这个div的内部，还有其他div，每个div都包含一段内容。我使用了以下jquery插件，根据点击“下一个”或“上一个”按钮使所有内容滚动，它就像一个魅力：

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

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

我想突出显示用户当前正在阅读的项目（类似于Google阅读器）。我需要这样做，无论他们是否使用插件到达那里或使用浏览器的滚动条。
我需要能够告诉插件哪个项目具有焦点，以便我滚动到“下一个”窗格的调用实际上使用当前查看的窗格（而不仅仅是插件滚动的前一个窗格）。

我尝试过一些搜索，但我似乎无法找到一种方法来做到这一点。我找到了很多方法来滚动到一个特定的项目，但我找不到一种方法来确定哪个元素在溢出的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变量值的那个，因为这将是第一个（或最高的）。

Answer 2

由于您正在使用jquery，请查看position（）函数http://api.jquery.com/position/

您可以使用它来检查所选元素相对于周围容器的位置。

实施例

<!DOCTYPE html>
<html>
<head>
  <style>

  div { height: 3px;
      overflow: auto;
      padding: 10px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>

<div id="container">
  <p>Hello</p>
</div>
<p></p>

<script>
$(document).ready(function(){
    $("#container").scroll(function(ev){
        var p = $("p:first");
        var position = p.position();
        $("p:last").text( "left: " + position.left + ", top: " + position.top );
    });
});
</script>

</body>
</html>

如果代码看起来很熟悉，那么我从.position页面中偷走了大部分内容:)。

你可以在http://jsfiddle.net/ehudokai/HBhRL/5/看到它的实际效果，尝试滚动“Hello”这个词。

您可以使用以下事实：当元素在父级中移动时，顶部值会发生变化，以查看它是否靠近可查看部分。

希望有所帮助！

Answer 3

我使用jquery出现这个插件..它像魔术一样......：）

$(document).ready(function() {
    $('#wallbottom').appear(function() {
        alert("div appeared");
    });
});

code.google.com/p/jquery-appear/

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

3 个答案: