The problem
In SvelteKit, I am trying to disable and enable scroll when my side menu is opened. To do that, I am trying to utilize the {open} variable that is bound to my menu icon with bind:open={open}.I want to trigger the function enableScroll() when open is true, and trigger the function disableScroll() when open is false.Both functions work fine. The {open} variable is true when I expect it to, and false when I expect it to when I use console.log().The problem is that my if-block doesn't respond to {open} changing.
What I've tried
- I have tried wrapping my if-block in another function and calling the function changeScroll() on:click.
- I have triedadapting the conditionals: if === true, true, open || null; similarly for the negation.
- I have tried using a ternary operator inside of the binding like so: on:click={open ? disableScroll() : enableScroll() }
Currently, my code looks like this:
$: if (open === true) { onMount(() => { disableScroll() }) } else if (open === false) { onMount(() => { enableScroll() }) }
Perhaps I'm using onMount() wrongly? Or somehow I need to change my if statement to make it properly reactive / fix it some other way? I would gladly appreciate some help! Thank you.