Estoy usando css scroll snap para desplazarme que tiene 100vh de altura. El ajuste de desplazamiento funciona maravillosamente.
Dicho esto, necesito determinar qué tan lejos se ha desplazado el visitante del sitio por algunas razones diferentes.
Yo he tratado:
let wrapper = document.getElementById('landing-page-wrapper'); console.log(wrapper.offsetTop); console.log(window.scrollY);También probé window.scrollTop, wrapper.scrollTop y más.
Aquí hay un Codepen de lo que estoy viendo.
¿Cómo puedo saber la distancia desplazada mientras uso secciones de 100vh y css scroll-snap?
AIT
Según su código compartido, la razón por la cual window.onscroll no funciona como se esperaba es porque ni window ni document.body se desbordan verticalmente. Solo el elemento que se desborda activará el evento de desplazamiento y, en este caso, es en realidad el elemento que coincide con el selector .box-wrapper .
Por lo tanto, si escucha el evento de desplazamiento en ese elemento, entonces debería poder recuperar su posición de desplazamiento vertical usando event.currentTarget.scrollTop :
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => { console.log(e.currentTarget.scrollTop); });Ver ejemplo de prueba de concepto: