确定元素是否在屏幕上

Question

有没有办法确定某个元素当前是否在用户的屏幕/视口中使用jQuery可见？ （不使用其他外部库）

Answer 1

不是直接使用默认的jQuery，但是你可以实现自己的函数，之后可以使用一个jQuery元素：

(function ($) {
    $.fn.isOnScreen = function () {
        var topView = $(window).scrollTop();
        var botView = topView + $(window).height();
        var topElement = this.offset().top;
        var botElement = topElement + this.height();
        return ((botElement <= botView) && (topElement >= topView));
    }
})(jQuery);

添加此代码后，您可以致电$('#yourElementId').isOnScreen()，如果整个元素都在屏幕上，则会返回true，如果不是，则会false。

你也可以稍微玩一下，如果屏幕上至少有四分之一的元素可见，它会返回true，例如：

(function ($) {
    $.fn.isOnScreen = function () {
        var topView = $(window).scrollTop();
        var botView = topView + $(window).height();
        var topElement = this.offset().top;
        var botElement = topElement + (this.height() / 4); //<---
        return ((botElement <= botView) && (topElement >= topView)); 
    }
})(jQuery);