ProgramandooIntentándolo

Cómo comprobar si un elemento está visible con jQuery

Comprobar si un elemento esta visible con Jquery

Es habitual querer comprobar si un elemento concreto se está mostrando o no para ejecutar una acción u otra, y como no podía ser de otra forma jQuery nos permite comprobar si un elemento se está mostrando o no con la función .is(':visible') o .is(':hidden') para hacer la comprobación al reves.

Hasta aquí todo es muy bonito pero ¿qué es lo que comprueba esta función en realidad? pues simplemente comprueba el valore de la propiedad display, si es none (#elemento {display: none;}) entonces el elemento no está visible y en cualquier otro caso sí lo está.


// Si elemento esta visible lo oculta y si no lo muestra
if ($('#elemento').is(':visible')) {
    $('#elemento').hide();
} else {
    $('#elemento').show();
}

// Si el elemento2 esta oculto lo indica por consola y si no ejecuta una funcion
if ($('#elemento2').is(':hidden')) {
    console.log("Esta oculto");
} else {
    hacerAlgo();
}

Con esto tenemos cubiertos los casos más habituales porque las controlamos el resultado de .show() y .hide() que modifican el valor de display.

Comprobar si un elemento esta de verdad visible en jQuery (display != none, visibility != hidden y opacity > 0)

Aunque display es la propiedad que hace que de verdad un elemento se muestre o no también se pueden utilizar otras propiedades como visibility y opacity que aunque no hacen que el elemento desaparezca del layout porque realmente siguen ocupando un espacio a efectos prácticos no son visibles y por tanto también podríamos querer controlar estos casos.

Con una sencilla función podemos hacer estas 3 comprobaciones.


/**
 * Comprueba si un elemento es visible o no
 *
 * @param elemento
 */
function esVisible(elemento) {
    var esVisible = false;
    if ($(elemento).is(':visible') && $(elemento).css("visibility") != "hidden"
            && $(elemento).css("opacity") > 0) {
        esVisible = true;
    }

    return esVisible;
}

// Ejecuta la funcion solo si el elemento esta visible
if (esVisible('#elemento')) {
    hacerAlgo();
}

Con esto ya tenemos controladas todas las propiedades que pueden hacer que un elemento no se vea, bueno en realidad no porque si le ponemos el height o el width a 0 puede que también se deje de ver, o si hay otro elemento encima por ejemplo puede que tampoco sea visible, pero para estos casos particulares no vamos a encontrar ninguna función genérica que nos solucione la vida porque hay muchos factores para determinar si el elemento se ve realmente o no.

Comprobar si un elemento se está mostrando en la pantalla

Otra de las comprobaciones que podemos querer realizar es si un elemento se está visualizando en la pantalla, es decir, independientemente de que este oculto o no puede ser que el elemento no se esté mostrando en la pantalla porque tengamos scrolls por ejemplo.


/**
 * Comprueba si un elemento esta dentro de la pantalla
 *
 * @param elemento
 */
function estaEnPantalla(elemento) {
    var estaEnPantalla = false;

    var posicionElemento = $(elemento).get(0).getBoundingClientRect();

    if (posicionElemento.top >= 0 && posicionElemento.left >= 0 
            && posicionElemento.bottom <= (window.innerHeight || document.documentElement.clientHeight)
            && posicionElemento.right <= (window.innerWidth || document.documentElement.clientWidth)) {
        estaEnPantalla = true;
    }

    return estaEnPantalla;
}

// Ejecuta la funcion solo si el elemento se esta mostrando en la pantalla
if (estaVisibleEnPantalla('#elemento')) {
    hacerAlgo();
}

Con esta función podemos detectar cuando se está mostrando el elemento dentro de la pantalla pero solo estamos comprobando que su posición este dentro de la pantalla por lo que puede ser que en realidad no este realmente visible, para hacer la comprobación completa podemos añadir esta función a la anterior.


/**
 * Comprueba si un elemento esta visible o no en la pantalla
 *
 * @param elemento
 */
function esVisibleEnPantalla(elemento) {
    var esVisible = false;
    if ($(elemento).is(':visible') && $(elemento).css("visibility") != "hidden" 
            && $(elemento).css("opacity") > 0 && estaVisibleEnPantalla('#elemento')) {
        esVisible = true;
    }

    return esVisible;
}

Y con esta función terminamos, al final la función apropiada va a depender exactamente de qué es lo que queremos comprobar.