1

espero que puedan ayudarme con esta duda, lo que pasa es que estoy detectando si un elemento es visible en pantalla, para ello estoy utilizando esta función:

    var imagen = document.querySelector(".rast-photo");
    window.onscroll = function () {
        var posTopView = window.scrollY;
        var posButView = posTopView + window.innerHeight;
        var elemTop = imagen.offsetTop;
        var elemBottom = elemTop + imagen.offsetHeight;
        if ((elemBottom < posButView && elemBottom > posTopView) ||(elemTop > posTopView && elemTop < posButView)) {
            console.log("Si es visible")
        } else {
            console.log("No es visible")
        }
    };

El único problema es que esto me manda algo así:Ejemplo de salida

me repite bastantes veces el console log porque la condición se cumple varias veces, de que manera puedo hacer que solo aparezca una vez? me refiero a que si el elemento es visible mande el mensaje que es visible pero solo una vez y cuando deje de ser visible me mande el mensaje de que no es visible pero igual solo una vez, espero puedan ayudarme con esta duda, GRACIAS!

1
  • 1
    Completa el codigo para lograr obtener el error ;)
    – Excorpion
    Commented el 10 feb. 2021 a las 13:53

1 respuesta 1

1

Ok, ya lo solucioné jeje... me había bloqueado pero fue bastante sencillo en realidad >.<

        var imagen = document.querySelector(".rast-photo");
        var visible = false;
        window.onscroll = function () {
            var posTopView = window.scrollY;
            var posButView = posTopView + window.innerHeight;
            var elemTop = imagen.offsetTop;
            var elemBottom = elemTop + imagen.offsetHeight;
            if ((elemBottom < posButView && elemBottom > posTopView) ||(elemTop > posTopView && elemTop < posButView)) {
                if(visible === false){
                    console.log("Si es visible")
                }
                visible=true;
            } else {
                if (visible === true){
                    console.log("No es visible")
                }
                visible=false;
            }
        };
1
  • 1
    Cual era el problema, como lo solucionastes, que cambiastes? Recuerda que este sitio es para ayudarte y ayudar a otros miembros de la comunidad Commented el 10 feb. 2021 a las 14:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.