Как узнать, какой верхний элемент отображается в div

Question

Вопрос в этой ссылке отвечает, как узнать, видимо ли элемент после прокрутки. (Check if element is visible after scrolling). У меня немного другая ситуация: у меня есть прокрутка div, со многими элементами внутри нее, идентифицированными идентификатором. В любой момент времени, как я могу узнать, какой из них является верхним элементом, отображаемым в div? Я использую angular.js, поэтому я имею в виду, что у меня есть переменная в моей области, которая постоянно обновляется с верхним элементом, который появляется в прокрутке div.

Answer 1

Вы можете создать директиву, которая перехватывает к scoll событию элемента, а затем определяет ближайший к его вершине, перебирает все дети и сравнивая их offsetTop к его собственному offsetTop + scrollTop.

.directive('detectClosestToTop', function ($timeout) { 
    function findClosestToTop(root) { 
     var closestElem; 
     var closestTop = root.scrollHeight; 
     var minTop  = root.offsetTop + root.scrollTop; 

     [].forEach.call(root.children, function (child) { 
      var childTop = child.offsetTop; 
      if ((childTop >= minTop) && (childTop < closestTop)) { 
       closestElem = child; 
       closestTop = childTop; 
      } 
     }); 

     return closestElem; 
    } 

    return { 
     restrict: 'A', 
     link: function (scope, elem) { 
      // Create a the onScroll listener 
      function detectClosest() { 
       scope.closestToTop = findClosestToTop(elem[0]); 
      } 
      function onScroll() { 
       scope.$apply(detectClosest); 
      } 

      // Register the listener and make sure we clean up, 
      // when/if the element is removed 
      elem.on('scroll', onScroll); 
      scope.$on('$destroy', function() { 
       elem.off('scroll', onScroll); 
      }); 

      // Initialize `scope.closestToTop`, 
      // after the content has been rendered 
      $timeout(detectClosest); 
     } 
    }; 
}); 

---

См, также, это short demo.

Answer 2

Это зависит от того, какие элементы в вашей прокруткой дивы .. Если все они являются дивы, то каждый раз, когда вы перечисляете вам просто нужно рассчитать так:

$('.outer-div').scroll(function(){ 
    $('div').each(function(){ 
     if($('.outer-div').scrollTop() + $('.outer-div').height() > $(this).offset().top && $('.outer-div').scrollTop() < $(this).offset().top){ 
      console.log("shown in div") 
     } 
    }); 
}); 

Примечание: Я не проверял еще, так может быть, есть опечатка .. Ура