Svelte：将 noscroll 类名添加到组件的主体
我有一个带有可变切换开关的 src/components/UI/Sidebar.svelte 组件。
export let toggle = true;
我想<body>在切换为真时添加一个类名“noscroll”以锁定主体滚动。我在 src/template.html 添加了这个
<style>
.noscroll { position: fixed; overflow-y:scroll };
</style>当侧边栏打开时，实现这样的 y 轴滚动锁定的最佳方法是什么？
ABOUTYOU浏览 82回答 1
1回答
-
www说
在您的 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);
随时随地看视频慕课网APP
相关分类
JavaScript