使用jQuery從父級獲取子div

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>

現在，這就像這張圖片 。 現在，當我向下滾動時，如何知道焦點所在的子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
                }
            });
        });

在此處查看帖子： 滾動后檢查元素是否可見