I'm just getting familiar with working with binding. I have this file here: https://gist.github.com/JelaniThompson/74d062c5a28a18b75ca91cd44cd04d56
Does anyone know why y constantly returns 0 as opposed to the actual scroll position? I feel like this is more of a CSS issue than a Svelte issue but I could be mistaken.
When I did window.addEventListener instead, no events were being fired even on scroll with this HTML structure
You are scrolling the scroller element but binding to scrollY on window. Because the window is not being scrolled, scrollY remains 0.
If you want to know how far the scroller element has been scrolled, you should use scrollTop instead. Svelte won't automatically bind this for you, so you'll need to set up the event listener yourself.
<div class="container">
<div class="scroller" on:scroll={(e) => console.log(e.target.scrollTop)}>
<!-- etc -->
</div>
</div>
Keep in mind that the scroll events fire at a high rate and you may need to throttle it to prevent performance issues.
