如何获取当前显示在屏幕上的第一个可见 DOM 元素？

Question

如何获取当前显示在屏幕上的第一个可见 DOM 元素？

我尝试了类似的东西

var el = document.elementFromPoint(x, y)

并在while循环中增加y坐标，但问题是当文档上有css多列时它不起作用，在这种情况下返回标签，而不是实际元素。有什么方法可以让我真正获得适用于 css 列的屏幕（顶部，左侧）元素？

Answer 1

这是一个非常基本的示例，它只获取距离top 最远的元素。这只是一个开始，因为您可能还需要考虑 left 偏移量。

您需要排除 body 和 html 元素（如下所示），因为它们始终是第一个。

Fiddle

var first;
$(':visible').not('body, html').each(function() {
    if (typeof first == 'undefined') {
        first = $(this);
    } else if ($(this).offset().top < first.offset().top) {
        first = $(this);
    }
});
first.addClass('highlight');