scrollX/Y for things other than window

[weepy]

Is there a reason why there's no bind:scrollX for dom nodes ? I see there are for window. I rolled my own solution, but it felt like it should be supported!

[Conduitry]

What would these measure? Which DOM properties are you referring to?

[weepy]

dom.scrollLeft and dom.scrollTop
So e.g if I want to programmatically set scrollLeft of a dom element from a reactive property or tweenable store prop.

[Rich-Harris]

I like this, I've wanted it a couple of times myself. Opened #3895. It uses scrollLeft and scrollTop as the binding names, rather than making it consistent with <svelte:window> but inconsistent with the DOM

[scottjmaddox]

+1 for wanting bind:scrollLeft/bind:scrollTop.

@Rich-Harris I saw that you identified some issues with your initial implementation approach. I could take a crack at fixing it, if you can point me in the right direction.

[mizzao]

We've been wanting this feature as well, to implement a scroll carousel functionality using CSS scroll snapping on a PWA. But the app needs to know the current scroll position!

What would you folks recommend as an interim solution? Would it be something like element.addEventListener("scroll", ...)?

[coleholyoake]

Would love an interim solution if anyone worked one out!

[aradalvand]

This would've been nice.
I thought it's already implemented since we have it for <svelte:window>.

[emonadeo]

Requires a few lines, but falling back to EventListeners this is the best I could come up with, using bind:

<script>
  import { onMount } from 'svelte';

  let elem;
  let elemScrollTop = 0; // This will be reactive
  
  onMount(() => {
    // Update elemScrollTop every time the user scrolls
    elem.addEventListener('scroll', ({ target }) => (elemScrollTop = target.scrollTop));
  });
</script>

<div bind:this={elem}></div>

I couldn't figure out a solution leveraging svelte's reactivity to update scrollTop/scrollLeft. If someone finds a better solution I'd love to know too.

[xylobol]

This would be a massive feature for my project. We have an in-house carousel that we've built, and it's extremely complex because we had to implement part of this ourselves.