我如何知道一个DOM元素在当前视口中是可见的?

是否有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(出现在视口中)?

(这个问题指的是Firefox。)

当前回答

我尝试了Dan的答案，然而，用于确定边界的代数意味着元素必须既≤视口大小，又完全在视口内才能为真，很容易导致假否定。如果你想确定一个元素是否在视口中，ryanve的答案是接近的，但被测试的元素应该与视口重叠，所以试试这个:

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */;
}

2013-04-29 02:36:20

其他回答

 const isHTMLElementInView = (element: HTMLElement) => {
  const rect = element?.getBoundingClientRect()

  if (!rect) return
  return rect.top <= window.innerHeight && rect.bottom >= 0
 }

这个函数检查元素是否在垂直水平的视口中。

2022-10-13 06:15:35

查看verge的源代码，它使用getBoundingClientRect。这就像:

function inViewport (element) {
  if (!element) return false;
  if (1 !== element.nodeType) return false;

  var html = document.documentElement;
  var rect = element.getBoundingClientRect();

  return !!rect &&
    rect.bottom >= 0 &&
    rect.right >= 0 && 
    rect.left <= html.clientWidth &&
    rect.top <= html.clientHeight;
}

如果元素的任何部分在视口中，则返回true。

2012-09-14 05:49:34

Domysee的答案https://stackoverflow.com/a/37998526接近正确。

许多示例使用“完全包含在视口中”，他的代码使用百分比来允许部分可见。他的代码还解决了“是否是父视图剪切”的问题，大多数示例都忽略了这个问题。

一个缺失的元素是父对象滚动条的影响——getBoundingClientRect返回父对象的外部矩形(包含滚动条)，而不是内部矩形(不包含滚动条)。子滚动条可以隐藏在父滚动条后面，当它不可见时，它被认为是可见的。

推荐的观察者模式不适合我的用例:使用方向键更改表中当前选择的行，并确保新选择是可见的。使用观察器进行此操作将过于复杂。

这是一些代码

它包括一个额外的hack (fudgeY)，因为我的表有一个粘头，不是通过直接的方式检测(自动处理这个将是相当乏味的)。此外，对于所需的可见分数，它使用十进制(0到1)而不是百分比。(对于我的例子，我需要完整的y, x是不相关的)。

function intersectRect(r1, r2) {
    var r = {};
    r.left = r1.left < r2.left ? r2.left : r1.left;
    r.top = r1.top < r2.top ? r2.top : r1.top;
    r.right = r1.right < r2.right ? r1.right : r2.right;
    r.bottom = r1.bottom < r2.bottom ? r1.bottom : r2.bottom;
    if (r.left < r.right && r.top < r.bottom)
        return r;
    return null;
}

function innerRect(e) {
    var b,r;
    b = e.getBoundingClientRect();
    r = {};
    r.left = b.left;
    r.top = b.top;
    r.right = b.left + e.clientWidth;
    r.bottom = b.top + e.clientHeight;
    return r;
}

function isViewable(e, fracX, fracY, fudgeY) {
    // ref https://stackoverflow.com/a/37998526
    // intersect all the rects and then check the result once
    // innerRect: mind the scroll bars
    // fudgeY: handle "sticky" thead in parent table.  Ugh.
    var r, pr, er;

    er = e.getBoundingClientRect();
    r = er;
    for (;;) {
        e = e.parentElement;
        if (!e)
            break;
        pr = innerRect(e);
        if (fudgeY)
            pr.top += fudgeY;
        r = intersectRect(r, pr);
        if (!r)
            return false;
    }

    if (fracX && ((r.right-r.left) / (er.right-er.left)) < (fracX-0.001))
        return false;
    if (fracY && ((r.bottom-r.top) / (er.bottom-er.top)) < (fracY-0.001))
        return false;
    return true;
}

2021-10-04 03:25:06

我使用这个函数(它只检查y是否在屏幕上，因为大多数时候x是不需要的)

function elementInViewport(el) {
    var elinfo = {
        "top":el.offsetTop,
        "height":el.offsetHeight,
    };

    if (elinfo.top + elinfo.height < window.pageYOffset || elinfo.top > window.pageYOffset + window.innerHeight) {
        return false;
    } else {
        return true;
    }

}

2017-01-13 06:57:09

在之前的回答中，大多数用法都没有做到这一点:

-当一个元素的任何像素都是可见的，但不是“一个角落”， -当一个元素大于viewport并且居中时， -大多数只检查文档或窗口内的单个元素。

好吧，对于所有这些问题，我都有一个解决方案，好的方面是:

-你可以返回可见时，只有一个像素从任何一方显示，而不是一个角落， -你仍然可以返回大于viewport的visible while元素， -你可以选择你的父元素，或者你可以自动让它选择。 -也适用于动态添加的元素

如果你检查下面的片段，你会发现在元素的容器中使用溢出滚动的区别不会造成任何麻烦，并且看到与其他答案不同的是，即使一个像素从任何一侧显示，或者当一个元素大于视口时，我们看到的是元素的内部像素，它仍然有效。

用法很简单:

// For checking element visibility from any sides
isVisible(element)

// For checking elements visibility in a parent you would like to check
var parent = document; // Assuming you check if 'element' inside 'document'
isVisible(element, parent)

// For checking elements visibility even if it's bigger than viewport
isVisible(element, null, true) // Without parent choice
isVisible(element, parent, true) // With parent choice

一个没有crossSearchAlgorithm的演示，对于大于viewport的元素，检查element3内部像素，可以看到:

你看，当你在element3内部时，它无法判断它是否可见，因为我们只检查元素是否从侧面或角落可见。

这个包含了crossSearchAlgorithm，它允许你在元素大于viewport时仍然返回visible:

JSFiddle玩:http://jsfiddle.net/BerkerYuceer/grk5az2c/

这段代码是为了获得更精确的信息，无论元素的任何部分是否显示在视图中。对于性能选项或仅垂直幻灯片，不要使用此选项!这段代码在绘图情况下更有效。

2019-09-12 10:31:00

我如何知道一个DOM元素在当前视口中是可见的?

推荐文章

最新文章

标签