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

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

(这个问题指的是Firefox。)

当前回答

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

-当一个元素的任何像素都是可见的，但不是“一个角落”， -当一个元素大于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

其他回答

在我看来，非常简单:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  return Math.abs(coords.top) <= coords.height;
}

2019-03-15 14:06:44

这是一个简单而简单的解决方法，对我来说很有效。

示例:您想查看元素在具有溢出滚动的父元素中是否可见。

$(window).on('scroll', function () {

     var container = $('#sidebar');
     var containerHeight = container.height();
     var scrollPosition = $('#row1').offset().top - container.offset().top;

     if (containerHeight < scrollPosition) {
         console.log('not visible');
     } else {
         console.log('visible');
     }
})

2017-06-19 10:49:18

一个更好的解决方案:

function getViewportSize(w) {
    var w = w || window;
    if(w.innerWidth != null)
        return {w:w.innerWidth, h:w.innerHeight};
    var d = w.document;
    if (document.compatMode == "CSS1Compat") {
        return {
            w: d.documentElement.clientWidth,
            h: d.documentElement.clientHeight
        };
    }
    return { w: d.body.clientWidth, h: d.body.clientWidth };
}


function isViewportVisible(e) {
    var box = e.getBoundingClientRect();
    var height = box.height || (box.bottom - box.top);
    var width = box.width || (box.right - box.left);
    var viewport = getViewportSize();
    if(!height || !width)
        return false;
    if(box.top > viewport.h || box.bottom < 0)
        return false;
    if(box.right < 0 || box.left > viewport.w)
        return false;
    return true;
}

2013-02-08 08:57:41

我在这里遇到的所有答案都只是检查元素是否位于当前视口中。但这并不意味着它是可见的。如果给定的元素在一个包含满溢内容的div中，并且它被滚动到视图之外，该怎么办?

要解决这个问题，您必须检查元素是否被所有父元素所包含。我的解决方案就是这样:

它还允许您指定多少元素必须是可见的。

Element.prototype.isVisible = function(percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = this.getBoundingClientRect();
    var parentRects = [];
    var element = this;

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

这个解决方案忽略了元素可能由于其他因素而不可见的事实，比如不透明度:0。

我已经在Chrome和Internet Explorer 11中测试了这个解决方案。

2016-06-23 17:47:56

对于类似的挑战，我非常喜欢这个要点，它为scrollIntoViewIfNeeded()暴露了一个填充。

所有必要的功夫都需要回答这个问题:

var parent = this.parentNode,
    parentComputedStyle = window.getComputedStyle(parent, null),
    parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
    parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
    overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
    overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
    overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
    overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
    alignWithTop = overTop && !overBottom;

这指的是你想知道的元素，例如，overTop或overBottom -你只需要得到漂移…

2016-03-14 13:14:21

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

推荐文章

最新文章

标签