Question

Hey guys I have an absolute position for an element that will be created in the future. I want to check if the element is going to be entirely visible on the current viewport. I know I could use getBoundingClientRect if the element was rendered on the page, however it’s not and it couldn’t not be. Is there a way that I can detect if given absolute coordinates (left, top, bottom, right) are going to be visible on the current viewport? Thanks in advance.

Edit:

My solution so far – insert an element with visibility: hidden and use getBoundingClientRect, I was just wondering if there is a better way.

Answer 1

If you have the absolute coordinates of this unrendered element (ie: you can pull them from JS variables, or read them from somewhere, or hard-code them or even write a script to read them out of a <style> tag on the page…), then you can do something like this:

var viewport = {
    x : 0,
    y : 0,
    width : 0,
    height : 0,
    update : function () {
        this.x = document.body.scrollLeft || document.documentElement.scrollLeft;
        this.y = document.body.scrollTop  || document.documentElement.scrollTop;
        this.width  = document.documentElement.clientWidth;
        this.height = document.documentElement.clientHeight;
    }
};

Now you should be able to check for intersections between your element’s x,y,width,height against the viewport’s x,y,width,height.

Any time the user scrolls, just hit viewport.update();.

I will say this:

This method should be fairly cross-browser compatible, but I really can’t make any guarantees in terms of IE6 — especially in Quirksmode (no <!doctype> on the html file).