Svelte: добавить имя класса noscroll в тело из компонента - PullRequest
Новая
       45

Svelte: добавить имя класса noscroll в тело из компонента

0 голосов
/ 05 августа 2020

У меня есть компонент src / components / UI / Sidebar.svelte с переключателем переменных. 

export let toggle = true;

Я хотел бы добавить имя класса «noscroll» к <body>, когда переключатель установлен чтобы заблокировать прокрутку тела. Я добавил это в src / template. html

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

Как лучше всего реализовать блокировку прокрутки по оси Y, как это, когда боковая панель открыта?

1 Ответ

1 голос
/ 05 августа 2020

В свой Sidebar.svelte вы добавляете реактивную функцию, которая переключает имя класса 

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

обновлено

Благодаря Ричу Харрису, который указал, что переключение требует второй аргумент спецификации это можно упростить до 

export let toggle;
$: document.body.classList.toggle('noscroll', toggle);
...