Question

有一个由ng-repeat制作的列表，其中有很多行。

 <ul ng-repeat="element in elements |  filter:filterQuery">
    <a class="row" >
        <div class="col-lg-8">
            <div class="caption">
                <h4>{{element.artists[0].name}}</h4>
            </div>
        </div>
    </a>
</ul>

我想找到哪个元素（垂直）位于屏幕的中心。 enter image description here

你可以帮帮我吗？我是Angular的新人。我相信问题类似于无限滚动。但不是找到最后一个元素，而是需要在中心找到元素

Answer 1

这是一个可能的解决方案，我可能会自己解决这个问题：

创建指令，将所有代码放入帖子链接功能。
存储窗口垂直中心坐标。
在任何列表父元素上添加scroll事件侦听器。
使用Document.elementFromPoint()找到当前最中心的元素。
为其分配活动课程，从之前的课程中删除。

您也不应忘记维持正确的指令生命周期。这意味着删除事件侦听器和解除引用DOM节点以防止内存泄漏。

指令：

.directive("highlightCentermost", function ($window, $document, $timeout) {
  return function postLink (scope, el) {
    // References are kept here
    var center, centermost

    // Find and update centermost element
    function probe () {
      var newCentermost = $document[0].elementFromPoint(0, center)
      // No centermost assigned yet
      if (!centermost) {
        centermost = newCentermost
        centermost.classList.toggle("active", true)
        return
      }
      // Found another element
      if (centermost !== newCentermost) {
        // Remove class from old element
        centermost.classList.toggle("active", false)
        // Add class to new element
        newCentermost.classList.toggle("active", true)
        // Update the reference
        centermost = newCentermost
      } else if (!newCentermost && centermost) {
        // Cleanup if nothing was found
        centermost.classList.toggle("active", false)
        centermost = null
      }
    }

    function resize () {
      center = $window.innerHeight / 2
    }

    resize()
    // $timeout is required to wait until all element directives are applied
    $timeout(probe)
    $window.addEventListener("scroll", probe)
    $window.addEventListener("resize", resize)

    scope.$on("$destroy", function cleanup () {
      $window.removeEventListener("scroll", probe)
      $window.removeEventListener("resize", resize)
      centermost = null
    })
  }
})

Full example at JSBin

优点：

您不需要知道收藏品大小。
无需检查每个DOM节点的位置。
每个滚动只有一个DOM操作。

缺点：

您必须对列表项目的内容进行微观管理。弹出叠加可能会引入更多复杂性，具体取决于滚动内容。

请注意，这是最基本的版本，您可能希望改进计算垂直中心和探测元素的函数（如探测两点而不是一点）。我在其中一个应用程序中使用了类似的方法来实现display:sticky模拟，因此它非常灵活。

我可以提出更多解决方案：

检查scroll / animationFrame上每个列表项的垂直位置，如果满足某些条件则更新类。慢，但可以处理动态高度。
如果列表项高度不变，则可以编写函数来计算scrollTop值的元素当前条件。这是虚拟滚动背后的机制（仅显示视口中的项目，允许具有大量项目而不会影响性能）。

Answer 2

我不知道如何使用Angular 但要获得中间元素，你应该尝试类似的东西。

计算元素长度。除以每两年的结果。

你的元素位于中心位置。如果你有类似2.5的东西，可以在之前或之后定位到一个。

Answer 3

嘿，我创造了小提琴http://jsfiddle.net/uwk46bky/1/ 可能有帮助： - ）

<div ng-init="elements=['1','2','3','4','5']">
  <ul ng-repeat="element in  elements">
    <a class="row" >
        <div class="col-lg-8">
            <div class="caption">
                <h4 ng-class="{'check':($index+0.5)==(elements.length/2)}">{{element}}</h4>
            </div>
        </div>
    </a>
</ul>
</div>

CSS： -

.check{
 background-color:red;   
}

中心是什么元素？

3 个答案: