Svelte: 구성 요소에서 본문에 스크롤 클래스 이름을 추가하지 않음

나는 가변 토글이 있는 부품을 가지고 있다.

export let toggle = true;

토글이 참일 때 의 클래스 이름을 추가하여 본문 스크롤을 잠급니다. 나는 이것을 에 추가했다

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

사이드바가 열려 있을 때 이렇게 y축 스크롤 잠금을 구현하는 가장 좋은 방법은 무엇입니까?

사이드바에 있습니다.svelt 클래스 이름을 전환하는 반응 함수를 추가합니다

export let toggle;
$: document.body.classList[toggle ? 'add' : 'remove']('noscroll');

갱신된

토글에는 두 번째 주장이 필요하다는 것을 지적한 리치 해리스 덕분에 이것은 다음과 같이 단순화될 수 있다

export let toggle;

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

이 질문 이후 공개 베타가 된 SvelteKit를 사용할 때 제공된 변수를 사용할 수도 있습니다.

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

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