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

【问题标题】：How to determine which element(s) are visible in an overflowed <div>如何确定溢出的 <div> 中哪些元素可见
【发布时间】：2011-06-03 17:35:00
【问题描述】：

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

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

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

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

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

但我不知道哪个 div 在可滚动窗格中具有“焦点”。我希望能够这样做有两个原因。

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

我已尝试进行一些搜索，但我似乎无法找到一种方法来做到这一点。我找到了很多滚动到特定项目的方法，但我找不到一种方法来确定在溢出的 div 中哪个元素可见。如果我可以确定哪些项目是可见的，我可以（可能）找出其余的。

如果有帮助，我正在使用 jquery。谢谢！

【问题讨论】：

一种解决方案是计算滚动位置、框尺寸...
您可以使用真实的、可访问的滚动条，并在适当的时候使用scrollIntoView 来引入项目。至于确定哪个是焦点，将其作为变量锁定并导航您的 DOM 以查找哪个是下一个/上一个。

标签： javascript jquery html html-parsing

【解决方案1】：

我为此使用 jquery 出现插件.. 它就像魔术一样工作.. :)

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

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

【讨论】：

【解决方案2】：

您可以确定每个 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 变量值最小的那个，因为这将是第一个（或最高）的。

【讨论】：

好的，这似乎有效。非常简单的解决方案，谢谢。我会进行一些测试，看看我能看到什么。知道它的扩展性如何吗？
您最初可以只进行此计算以选择“焦点”div并将其存储在变量中。从那时起，如果用户滚动只需确定滚动是向上还是向下并向上或向下移动 div，直到等式再次找到正确的 div，即无需在 every div 上执行此操作.

【解决方案3】：

由于您使用的是 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”这个词。

您可以利用元素在父元素中移动时顶部值发生变化的事实来查看它是否接近可视部分。

希望有帮助！

【讨论】：