Svelte：将 noscroll 类名从组件添加到主体

Question

我有一个src/components/UI/Sidebar.svelte带有变量切换的组件。

export let toggle = true;

我想在当切换为 true 时添加一个类名noscroll来<body>锁定正文滚动。我已将其添加到src/template.html

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

当侧边栏打开时，实现这样的 y 轴滚动锁的最佳方法是什么？

Answer 1

在 Sidebar.svelte 中，您添加一个切换类名的反应函数

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

更新

感谢 Rich Harris 指出，切换需要第二个参数规范，这可以简化为

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);

是的，这确实很重要——该语句将在服务器端渲染阶段失败。另外，您可以执行更紧凑的 `classList.toggle(name, condition)` — 因此您可以将整个语句更改为 `$: if (process.browser) document.body.classList.toggle('noscroll',toggle )` (6认同)