Checking the accuracy of visibility in viewport with jQuery?

Question

I have created this jsFiddle which should log numbers (_{those number doesn't represent anything - they just a flag which represents : " element has enter the viewport"}). into a span when a specific element comes into view ( even if it's partly visible)

So I have a relative div with many gray cubes .One of the cubes is orange .

When I scroll the div - the orange cube starts to show , and then I increase the numbers.

But the problem is that the numbers satrts to increase before the orange become visible :

As you can see here :

Question

I probably missing something but why does the numbers start before it actually visible ?

$.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++);
    }

});

@RokoC.Buljan Nothing. it just shows a flag that apparently the orange become visible. ( which is not). — Royi Namir, Aug 18 '15 at 11:31
Ohh OK ok thought you were about to ask an XY question :) got it — Roko C. Buljan, Aug 18 '15 at 11:32
The algorithm you're using relies on `viewport` being the window, not the container element (`.d`). — JJJ, Aug 18 '15 at 11:39
@Juhana ah, yes, that plugin was meant to be window, exactly that means that there are missing the parent offset calculations — Roko C. Buljan, Aug 18 '15 at 11:40
@Juhana this would be valid for iframe. But I wnat it to be applied for a absolute `div` which has a scroll. — Royi Namir, Aug 18 '15 at 11:40
@RoyiNamir probably not *exactly* what you want... but see this: http://jsfiddle.net/t58q6e1m/5/ basically taken from http://stackoverflow.com/a/26831113/383904 — Roko C. Buljan, Aug 18 '15 at 11:41
Try changing the value of viewport right to viewpost.right = win.width() - viewport.left; It seems to be working. — Domain, Aug 18 '15 at 11:44
What about this: http://jsfiddle.net/Pontual/t58q6e1m/7/ I've modified your fiddle with a function that I use to detect if an element is visible — Ricardo Pontual, Aug 18 '15 at 11:45
I've tried with FF and Chrome and both of them just showed the numbers when the orange div was completely visible. Did you tried with other browsers? — Ricardo Pontual, Aug 18 '15 at 12:37
@RicardoPontual Yes now it's working . Have no idea why I thought it didn't work. — Royi Namir, Aug 18 '15 at 12:39

score 1 · Accepted Answer · answered Aug 18 '15 at 11:49

1

As you are using offset to calculate the bounds of your orange boxes (jQuery .offset() will get the current coordinates relative to the document.), you should as well use offset to calculate the viewport bounds.

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

Your Fiddle: http://jsfiddle.net/abhitalks/t58q6e1m/6/

answered Aug 18 '15 at 11:49

Abhitalks

27,721
5
58
81

That was my mistake.the offset is relative to document ( as opposed to `position`). – Royi Namir Aug 18 '15 at 11:52
Yes. You could use `.position` to calculate position of your orange boxes, but then you would then compare the top with the `scrollTop` of the viewport. – Abhitalks Aug 18 '15 at 11:53

Checking the accuracy of visibility in viewport with jQuery?

1 Answers1