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>