Svelte：从组件向 body 添加 noscroll 类名

Question

9

我有一个 src/components/UI/Sidebar.svelte组件，其中包含一个名为toggle的变量。

export let toggle = true;

当切换为真时，我希望向 <body> 添加一个名为 noscroll 的类名以锁定页面滚动。我已将其添加到 src/template.html 中。

<style>
    .noscroll { position: fixed; overflow-y:scroll };
</style>

实现类似于这样的侧栏打开时y轴滚动锁定，最好的方法是什么？

- Mike

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephane Vanraes · Accepted Answer

在您的Sidebar.svelte文件中，您添加了一个响应式函数来切换类名。

export let toggle;
$: document.body.classList[toggle ? 'add' : 'remove']('noscroll');

更新

感谢Rich Harris指出toggle接受第二个参数规范，这可以简化为：

export let toggle;

$: if (process.browser) document.body.classList.toggle('noscroll', toggle);

编辑当使用自从这个问题被提出以来进入公共测试版的 SvelteKit 时，也可以使用提供的browser变量。

export let toggle;
import { browser } from '$app/env'

$: if (browser) document.body.classList.toggle('noscroll', toggle);