使用 jQuery 检查视口中可见性的准确性？

Question

我创建了这个jsFiddle，它应该记录数字（_{这些数字不代表任何东西——它们只是一个代表：“元素已进入视口”的标志}）。当特定元素进入视野时进入跨度（即使它是部分可见的）

所以我有一个带有许多灰色立方体的relative div。其中一个立方体是orange。

当我滚动 div - 橙色立方体开始显示，然后我增加数字。

但问题是，在橙色变得可见之前，数字会增加：

如您所见：

问题

我可能遗漏了一些东西，但为什么数字在实际可见之前就开始了？

$.fn.isOnScreen = function()
{

    var win = $(".d");

    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));


};

var i = 0;

$(".d").on('scroll', function()
{
    if ($(".orange").isOnScreen())
    {
        $("#counter").text(i++);
    }

});

Answer 1

当您使用offset 计算橙色框的边界时（jQuery .offset() 将获得相对于文档的当前坐标。），您也应该使用offset计算视口边界。

var viewport = {
    top: win.offset().top,
    left: win.offset().left
};

你的小提琴：http://jsfiddle.net/abhitalks/t58q6e1m/6/