Getting scroll of element in svelte

Question

I have a div with style overflow: scroll and it is overflowing on the X-axis. I would like to get the value of how far left/right the user has scrolled within this element, but I can't really figure it out.

I saw that you can quite easily bind the window scroll, but as it is just an element that is scrolling and not the window this won't work. https://svelte.dev/tutorial/svelte-window-bindings

so I tried binding the element, but couldn't really get any meaningful data out of it.

<script>
  let content;
</script>

<div class="carousel">
  <div class="content" bind:this={content}>
    ...
  </div>
</div>
{#if content}
{content.scrollLeft}
{/if}

is it at all possible and am I just missing something?

Answer 1

You have to find the scroll left of the container/carousel. Not for content. below code will work. check this repl

<script>
  let carousel, sleft;
</script>

<div class="carousel" bind:this={carousel} 
on:scroll={()=>sleft=carousel.scrollLeft}>
  <div class="content" >
    ...
  </div>
</div>

{#if carousel}
{sleft}
{/if}