Question

我需要检查视口中的dom-elment是否在不同的“可见性级别”中可见。我知道如何检查它是否可见，但这次我需要一个指示元素的可见度。可以将其视为3种颜色：绿色，黄色和红色。绿色100％可见，红色根本看不到。

有没有人对如何为此编写jQuery或Javascript有任何想法？

编辑：0到100也是一个很好的指标。 0为0％可见，100为100％可见。

Answer 1

幸运的是，我必须开发几乎你想要的东西。它是一个jQuery扩展，它告诉您元素相对于浏览器窗口的可见性。它返回一个具有两个属性（水平和垂直）的对象。如果垂直值为-1，则该元素在视口上不可见。如果它是0，那么它是可见的。如果结果为1，则视口下不可见。类似地，水平。

不同之处在于'0'不区分'完全在视口中'或部分在视口中。我需要它来确定某些东西是在视口之上，之内还是之下（左右相同）。但是，这是一个很好的开始，它可以很容易地改变为你需要的。

    jQuery.fn.viewportPosition = function () {
        var $window = $(window);
        var position = this.offset();
        var viewport = { bottom: $window.height(), right: $window.width() };
        var rect = { top: position.top, left: position.left, bottom: position.top + this.height(), right: position.left + this.width() };
        return {
            vertical: (rect.bottom < 0) ? -1 : (rect.top > viewport.bottom) ? 1 : 0,
            horizontal: (rect.left < 0) ? -1 : (rect.left > viewport.right) ? 1 : 0
        };
    };

在级别中检查元素视口可见性

1 个答案: