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

kyks70gy 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(115)

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

export let toggle = true;

我想在toggle为true时将类名noscroll添加到<body>以锁定主体卷轴。我已在src/template.html上添加了此类名

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

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

1条答案

在Sidebar.svelte中，添加一个React函数来切换类名

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