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

Question

我有一个 src/components/UI/Sidebar.svelte 组件，带有可变开关。

export let toggle = true;

我想在切换为 true 时向 <body> 添加类名“noscroll”以锁定正文滚动。我已经在 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 指出 toggle 有第二个参数 specs 这可以简化为

export let toggle;

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

编辑当使用自问到此问题后进入 public 测试版的 SvelteKit 时，您还可以使用提供的 browser 变量。

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

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

Svelte: add noscroll classname to body from component