ABOUTYOU
2022-12-22 09:44:29
我有一個帶有可變切換開關(guān)的 src/components/UI/Sidebar.svelte 組件。export let toggle = true;我想<body>在切換為真時添加一個類名“noscroll”以鎖定主體滾動。我在 src/template.html 添加了這個<style>
.noscroll { position: fixed; overflow-y:scroll };
</style>當(dāng)側(cè)邊欄打開時,實(shí)現(xiàn)這樣的 y 軸滾動鎖定的最佳方法是什么?
1 回答

www說
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個贊
在您的 Sidebar.svelte 中,您添加了一個反應(yīng)函數(shù)來切換類名
export let toggle;
$: document.body.classList[toggle ? 'add' : 'remove']('noscroll');
更新
感謝 Rich Harris 指出 toggle 需要第二個參數(shù)specs這可以簡化為
export let toggle;
$: if (process.browser) document.body.classList.toggle('noscroll', toggle);
編輯 當(dāng)使用自問到這個問題后進(jìn)入公開測試版的 SvelteKit 時,您還可以使用browser提供的變量。
export let toggle;
import { browser } from '$app/env'
$: if (browser) document.body.classList.toggle('noscroll', toggle);
添加回答
舉報
0/150
提交
取消