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

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

(这个问题指的是Firefox。)

当前回答

让我感到困扰的是，该功能没有以jquery为中心的版本可用。当我看到Dan的解决方案时，我发现有机会为那些喜欢用jQuery OO风格编程的人提供一些东西。它很漂亮，很时髦，对我来说很有魅力。

哒哒，哒哒，嘣

$.fn.inView = function(){
    if(!this.length) 
        return false;
    var rect = this.get(0).getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );

};

// Additional examples for other use cases
// Is true false whether an array of elements are all in view
$.fn.allInView = function(){
    var all = [];
    this.forEach(function(){
        all.push( $(this).inView() );
    });
    return all.indexOf(false) === -1;
};

// Only the class elements in view
$('.some-class').filter(function(){
    return $(this).inView();
});

// Only the class elements not in view
$('.some-class').filter(function(){
    return !$(this).inView();
});

使用

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

    if( $('footer').inView() ) {
        // Do cool stuff
    }
});

2015-08-02 13:40:44

其他回答

查看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

我在这里遇到的所有答案都只是检查元素是否位于当前视口中。但这并不意味着它是可见的。如果给定的元素在一个包含满溢内容的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

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

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

作为Element.getBoundingClientRect()的支持，最简单的解决方案已经变得完美:

function isInView(el) {
  const box = el.getBoundingClientRect();
  return box.top < window.innerHeight && box.bottom >= 0;
}

2019-07-30 19:54:40

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

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

$(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

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

推荐文章

最新文章

标签