I am using css scroll snap to scroll through that are 100vh in height. The scroll snap works beautifully.
That said I need to determine how far the site visitor has scrolled for a few different reasons.
I have tried:
let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);
I have also tried window.scrollTop, wrapper.scrollTop and more.
Here is a Codepen of what I am seeing
How can I know the distance scrolled while using 100vh sections and css scroll-snap
TIA
Based on your shared code, the reason why window.onscroll does not work as expected is because neither window nor document.body are overflowing vertically. Only the element that is overflowing will fire the scroll event, and in this case it is actually the element that matches the .box-wrapper selector.
Therefore if you listen to the scroll event on that element, then you should be able to retrieve its vertical scroll position using event.currentTarget.scrollTop:
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
console.log(e.currentTarget.scrollTop);
});
See proof-of-concept example: