Svelte Scroll Bind CSS 容器问题

Question

我刚刚熟悉使用绑定。我这里有这个文件：https://gist.github.com/JelaniThompson/74d062c5a28a18b75ca91cd44cd04d56

有谁知道为什么 y 经常 returns 0 而不是实际的滚动位置？我觉得这更像是一个 CSS 问题，而不是 Svelte 问题，但我可能错了。

当我改为 window.addEventListener 时，即使在具有此 HTML 结构的滚动上也没有触发任何事件

Answer 1

您正在滚动滚动条元素，但绑定到 window 上的 scrollY。因为 window 没有滚动，所以 scrollY 保持为 0。

如果您想知道滚动条元素滚动了多远，您应该改用scrollTop。 Svelte 不会自动为您绑定，因此您需要自己设置事件侦听器。

<div class="container">
  <div class="scroller" on:scroll={(e) => console.log(e.target.scrollTop)}>
    <!-- etc -->
  </div>
</div>

请记住，滚动事件的触发频率很高，您可能需要 throttle it 以防止出现性能问题。