Checking if a tag is on the screen

Question

This function receives an HTMLElement as an argument and returns true if the tag is on the screen and false otherwise.

function isTagVisible(tag) {
    var box;

    box = tag.getBoundingClientRect();

    if (box.left > 0) {
        if (box.left >= window.innerWidth) {
            return false;
        }
    }

    if (box.right <= 0) {
        return false;
    }

    if (box.top > 0) {
        if (box.top >= window.innerHeight) {
            return false;
        }
    }

    if (box.bottom <= 0) {
        return false;
    }

    return true;
}

Answer 1

if (box.left > 0) {
    if (box.left >= window.innerWidth) {
        return false;
    }
}

This seems a little redundant: the innerWidth is going to be greater than 0, so why do you need to conditionals?

Simply remove the outer one.

---

Your conditions are fairly short. Consider combining them:

if (box.right <= 0 || box.bottom <= 0) {
    return false;
}

if (box.left >= window.innerWidth || box.top >= window.innerHeight) {
    return false;
}

---

There isn't much more to say about your code, but I have an idea for future improvement: right now, your code will say true even if the element is partially hidden on the screen. How do you plan on handling this?