Question

大家好，我有一个父div和多个子div。我有一个可以上下移动的卷轴来查看孩子。现在我想知道有一种方法，当我向下或向上滚动然后使用jquery时，我会看到哪个子div是焦点。有没有办法做到这一点。如果是，请告诉我。感谢

这是一个例子

<div id="parent" style="overflow:scroll; height:200px">
   <div id="child1">
      <p>
     some text
     </p>
    </div>

   <div id="child2">
      <p>
     some text
     </p>
   </div>

   <div id="child3">
      <p>
     some text
     </p>
   </div>
</div>

现在这变成了这个image。现在当我向下滚动时，我怎么知道哪个子div是焦点。每次用户移动滚动时，我将如何知道哪个div处于焦点。

$( '#parent' ).scroll(function() {
  //What shoult I write here to know which child div is in focus 
});

Answer 1

我过去使用了一个名为Jquery Visible的插件来实现这一目标。我无法准确描述其背景中发生了什么，但您可以设置一个调用以检查您的元素是否在视口中：

$('#element').visible()

我想注意到我至少在12个月内没有使用过这个插件，所以支持可能已经结束了。 https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

Answer 2

我认为没有任何简单的方法可以做到这一点。然而，我确实在类似的帖子中找到了这个有用的功能：

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

它基本上会检查窗口顶部的元素。

要添加示例：

$( '#parent' ).scroll(function() {
            $(this).children().each(function(child) {
                if(isScrolledIntoView(child)) {
                    //Do the thing
                }
            });
        });

请在此处查看帖子：Check if element is visible after scrolling

使用jquery从父级获取子div

2 个答案: