1

estoy intentando colocar un modal que se muestre al scrollear hasta el 50% de la pagina. Intente utilizando

<script>

    window.addEventListener('scroll', () => {
        const scrollable = document.documentElement.scrollHeight - window.innerHeight;
        const scrolled = window.scrollY;



        if (Math.ceil(scrolled) === (scrollable / 2)) {
            alert('You reached 50%!');
        }
    });

</script>

Pero no puedo encontrar manera de lograrlo.

1 respuesta 1

0

El problema es en la condición if(Math.ceil(scrolled) === (scrollable / 2)), prácticamente nunca va a resultar verdadero, estás comparando valor y tipo (al usar 3 signos igual), pero el primer elemento es entero y el segundo podría ser de punto flotante.

Tal vez si aplicas también Math.ceil() a la división en algún momento podría resultar verdadera la condición, pero va a ser muy difícil que el evento se dispare exactamente al llegar al 50% del scroll.

Te sugiero agregar una variable para que la ventana (o alerta) se muestre solo una vez y que en la comparación revises si el desplazamiento actual es mayor o igual que la mitad del desplazamiento disponible:

// Agregar variable para que solo se muestre una vez
let reached = false;
window.addEventListener('scroll', () => {
    const scrollable = document.documentElement.scrollHeight - window.innerHeight;
    const scrolled = window.scrollY;

    if(!reached && Math.ceil(scrolled) >= Math.ceil(scrollable / 2)) {
        // Evitar que se vuelva a mostrar
        reached = true;
        alert('You reached 50%!');
    }
});
p { margin: 100px 20px; }
<p>Texto para llenar la pantalla</p>
<p>Texto para llenar la pantalla</p>
<p>Texto para llenar la pantalla</p>
<p>Texto para llenar la pantalla</p>
<p>Texto para llenar la pantalla</p>
<p>Texto para llenar la pantalla</p>
<p>Texto para llenar la pantalla</p>

1
  • Muchas gracias! Me ayudo mucho tu respuesta. Estoy recién comenzando y hay aspecto técnicos que a veces no me doy cuenta o no presto la atención necesaria.
    – nicocarro
    Commented el 19 may. 2021 a las 23:33

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.