Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Enable and disable scroll based on boolean in SvelteKit?

$
0
0

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.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>