Javascript 如何确定溢出区域中哪些元素可见<；部门>；_Javascript_Jquery_Html_Html Parsing

Javascript 如何确定溢出区域中哪些元素可见<；部门>；

javascript jquery html

Javascript 如何确定溢出区域中哪些元素可见<；部门>；,javascript,jquery,html,html-parsing,Javascript,Jquery,Html,Html Parsing,基本上，我正在尝试实现一个系统，其行为类似于内置在谷歌阅读器界面中的阅读窗格如果您还没有看到，Google Reader会在一个单独的框中显示每篇文章，当您滚动时，它会突出显示当前框（并将文章标记为已读）。除此之外，您还可以通过单击UI中的“上一步”和“下一步”按钮在文章列表中向前或向后移动我基本上已经知道了如何实现大部分功能。但是，我不确定如何确定在可滚动窗格中当前可见哪些div 我有一个div设置为overflow:auto。在这个div中，还有其他div，每个div都包含一段内容。我使

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

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

我基本上已经知道了如何实现大部分功能。但是，我不确定如何确定在可滚动窗格中当前可见哪些div

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

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

我想突出显示用户当前正在阅读的项目（类似于GoogleReader）。无论他们是使用插件还是使用浏览器的滚动条，我都需要这样做

我需要能够告诉插件哪个项目有焦点，以便我滚动到“下一个”窗格的调用实际使用当前查看的窗格（而不仅仅是插件滚动的前一个窗格）

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

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

您可以确定每个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');
    });
});

$（'#scrollableDiv'）。滚动（函数（）{
var areaHeight=$（this）.height（）；
$（'.innerDiv'）。每个（函数（）{
var top=$（this）.position（）.top；
var height=$（this.height（）；
如果（顶部+高度<0）
log（“此div在可视区域上方被模糊化”）；
否则如果（顶部>区域高度）
console.log（'此div在可视区域下方被模糊化'）
其他的
log（“此div至少部分处于视图中”）；
});
});

如果视图中有多个

div

，那么我会选择具有最小

offset

变量值的一个，因为这将是第一个（或最高的）变量。

因为您使用的是jquery，请查看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>


高度：3px；
溢出：自动；
填充：10px；}
p{左边距：10px；}
你好

$（文档）.ready（函数（）{
$（“#容器”）。滚动（函数（ev）{
var p=$（“p:第一”）；
变量位置=p.位置（）；
$（“p:last”）.text（“左：“+position.left+”，顶部：“+position.top”）；
});
});

如果代码看起来很熟悉，那是因为我从.position页上偷走了大部分代码：）

你可以在这里看到它的作用，试着滚动“Hello”这个词

可以使用顶值随图元在父图元中的移动而变化的事实来查看其是否靠近可视部分

希望有帮助

我使用jquery出现插件来实现这一点。。它像魔法一样工作……）

一种解决方案是使用滚动位置、框尺寸等进行计算……您可以使用真实的、可访问的滚动条，并在适当的时候使用滚动条将项目带入。至于确定哪一个是焦点，将其锁定为一个变量，并导航您的DOM以找到下一个/上一个。好的，这似乎起作用了。非常简单的解决方案，谢谢。我将运行一些测试，看看能看到什么。你知道它的伸缩性有多好吗？你可以先做这个计算，得到“聚焦”div，然后把它存储在一个变量中。从那时起，如果用户滚动，只需确定滚动是向上还是向下，并向上或向下移动div，直到等式再次找到正确的div，即不需要在每个div上执行此操作。

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