我有一个带有可变切换开关的 src/components/UI/Sidebar.svelte 组件。export let toggle = true;我想<body>在切换为真时添加一个类名“noscroll”以锁定主体滚动。我在 src/template.html 添加了这个<style>
.noscroll { position: fixed; overflow-y:scroll };
</style>当侧边栏打开时，实现这样的 y 轴滚动锁定的最佳方法是什么？
1 回答
www说
TA贡献1775条经验 获得超8个赞
在您的 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);
编辑 当使用自问到这个问题后进入公开测试版的 SvelteKit 时，您还可以使用browser提供的变量。
export let toggle;
import { browser } from '$app/env'
$: if (browser) document.body.classList.toggle('noscroll', toggle);
添加回答
举报
0/150
提交
取消