javascript - 查找最近的 GETBoundingClientRect

Question

我有一个 ClientRect 对象数组，这是我通过做得到的

var trackedElements = $('[track]');
var trackedBounds = [];
_.each(trackedBounds, function(elem) {
    return $(elem)[0].getBoundingClientRect();
});

我还有另一个元素的边界客户端矩形。

var currentElement = $('.active')[0].getBoundingClientRect();

我的问题是，如何在 trackedBounds 内找到 currentElement 最北的地方？

Answer 1

我认为您可以过滤不在 currentElement 以北的矩形:

trackedBounds = trackedBounds.filter(rect => rect.bottom > currentElement.top)

并根据它们的 .bottom 属性对剩余的矩形进行排序:

trackedBounds = trackedBounds.sort((rect1, rect2) => rect1.bottom - rect2.bottom)

结果是 trackedBounds 数组的第一个元素:

let result = trackedBounds
    .filter(rect => rect.bottom > currentElement.top)
    .sort((rect1, rect2) => rect1.bottom - rect2.bottom)
    [0]