在 svelte 中获取元素的滚动

Question

我有一个样式为 overflow: scroll 的 div，它在 X 轴上溢出。我想获得用户在该元素中滚动了多远 left/right 的值，但我无法真正弄明白。

我看到您可以很容易地绑定 window 滚动条，但是因为它只是一个滚动的元素而不是 window 这将不起作用。 https://svelte.dev/tutorial/svelte-window-bindings

所以我尝试绑定该元素，但无法真正从中获取任何有意义的数据。

<script>
  let content;
</script>

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

有可能吗？我只是错过了什么吗？

Answer 1

您必须找到 container/carousel 左侧的卷轴。不为内容。下面的代码将起作用。检查这个 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}

Answer 2

万一有人想绑定元素的垂直和水平滚动像素：

element.scrollLeft: 从左开始的水平像素
element.scrollTop: 从顶部开始的垂直像素

Here's a REPL with a working example

Here 是 html 元素可用的所有属性和方法的列表
这是 binding elemental properties

<script>
  let box
  let xScroll = 0
  let yScroll = 0

  function parseScroll() {
    xScroll=box.scrollLeft
    yScroll=box.scrollTop
  }
</script>

<div class="box" bind:this={box} on:scroll={parseScroll}>
  ...
  (scrollable content)
  ...
</div>

<div class='report'>
  <div>horizontal: {xScroll}</div>
  <div>vertical: {yScroll}</div>
</div>

在 svelte 中获取元素的滚动

Getting scroll of element in svelte

svelte