Question

您好，互联网上的好朋友，

我为用户的滚动位置创建了一个侦听器： <svelte:window bind:scrollY={y} /> 我想将此变量保存在商店中，以使其可以在整个网站上访问。但是为此，我需要一个塞特犬。有执行此操作的良好方法吗？

我尝试了此方法，但是它不起作用：

  $: () => scrollPos.set(y);
  $: console.log("LOG: scrollPos", $scrollPos);```

Answer 1

您应该应该能够直接绑定到商店价值：

<script>
    import { writable } from 'svelte/store';

    const y = writable(0);
</script>

<svelte:window bind:scrollY={$y}/>

不幸的是，事实证明您已经找到了一个错误-无论出于何种原因，该错误当前均不起作用。我在这里打开了一个问题：https://github.com/sveltejs/svelte/issues/3832

Answer 2

当它们所依赖的值更改时，将重新评估反应性语句，因此您可以使scrollPos.set(y)是反应性的，它将按预期工作。

示例（REPL）

<svelte:window bind:scrollY={y} />

<script>
  import { writable } from 'svelte/store';

  let y;
  const scrollPos = writable(0);

  $: scrollPos.set(y);
</script>

<div style="height:1000px;">
  <h1 style="margin-top:200px;">{$scrollPos}</h1>
</div>

Answer 3

代码如下：

<script>
import { y } from './store.js';
import LogScrollPosition from './LogScrollPosition.svelte';

let scrollY;
$: y.set(scrollY);
</script>

<button on:click={() => scrollY = 200}>
    Go down
</button>

<h1>Hello!</h1>

<LogScrollPosition />

<p>
Vestibulum arcu turpis, condimentum non lorem quis, volutpat laoreet turpis. Praesent euismod, libero eu pulvinar imperdiet, dolor ex molestie lacus, sed egestas arcu felis non libero. Aenean laoreet arcu porttitor dolor pulvinar eleifend. Pellentesque lacinia neque sit amet nulla blandit, at ullamcorper orci ultricies. Cras pulvinar nec est sit amet sollicitudin. Sed luctus massa nibh, eu luctus magna tincidunt vel. Morbi tempor velit elit, nec cursus risus pellentesque quis. Aliquam erat volutpat. Vivamus tristique lacus vel lorem lacinia, a accumsan turpis gravida. Maecenas dapibus gravida mauris, iaculis placerat urna rhoncus at. Vivamus vel malesuada nisi. Suspendisse pulvinar pellentesque lectus, non imperdiet nisi tempus sed. Maecenas vel magna eu diam faucibus semper ut nec neque.

Aliquam malesuada gravida libero, sit amet pellentesque felis viverra vel. Maecenas est tortor, eleifend ut est nec, maximus vehicula eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt fringilla urna id fermentum. Proin rhoncus iaculis ipsum. In a sapien sapien. Sed eget justo ac turpis sodales imperdiet. In condimentum mauris ut ex sagittis, id malesuada ligula dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vivamus volutpat id velit et vehicula. Vivamus lectus orci, aliquam a maximus et, rhoncus in nibh. Etiam interdum sagittis justo et scelerisque. Quisque dapibus pulvinar pulvinar. Curabitur pulvinar, odio id eleifend consequat, sapien nulla congue metus, ut porttitor massa ipsum eget mauris. Duis a facilisis velit, non semper massa. Vestibulum semper velit nisi, sit amet blandit eros consectetur sit amet. Morbi accumsan magna a ex tempus imperdiet. Duis vitae convallis ipsum, imperdiet efficitur magna. Praesent ultrices turpis nec enim molestie, non aliquet tellus luctus. Sed porttitor nibh sit amet metus malesuada imperdiet et vitae ligula. Donec sit amet ullamcorper nisl. Nulla rhoncus ligula non tellus finibus efficitur. Nullam accumsan mattis risus at cursus. Duis ligula ligula, ullamcorper ac risus nec, hendrerit vulputate massa.

Phasellus pellentesque mauris ligula, id dapibus nisi lobortis a. In eget quam tincidunt, mattis ante eu, dignissim nisl. Proin sollicitudin dolor porttitor, tincidunt ipsum at, consequat leo. Morbi consequat imperdiet mauris, sed maximus tellus venenatis ut. Vestibulum tempus nisi ac semper volutpat. Vivamus rhoncus augue eu erat aliquet sodales. Ut consequat sapien enim, in pulvinar mauris dapibus varius. In mi mi, aliquam vel ante eu, lobortis aliquet lorem. Donec vulputate ac lorem ac laoreet.
</p>

<svelte:window bind:scrollY={scrollY} />

从本质上讲您很亲密，但不要使该函数对$: () => ...做出反应。只需$: scrollPos.set(y)。

这里是一个示例REPL。

将窗口绑定保存在Svelte商店中

3 个答案: