在 SvelteKit 中启用和禁用基于布尔值的滚动？

Question

问题
在 SvelteKit 中，我试图在打开侧边菜单时禁用和启用滚动。为此，我尝试使用绑定到我的菜单图标的 {open} 变量 bind:open={open}。我想在open为真时触发函数enableScroll()，在open为假时触发函数disableScroll()。这两个功能都可以正常工作。 {open} 变量在我期望它时为真，而在我使用 console.log() 时我期望它为假。问题是我的 if-block 没有响应 {open} 的变化。

我试过的

我试过将我的 if 块包装在另一个函数中并调用函数 changeScroll() on:click。
我试过了调整条件：if === true, true, open ||无效的;同样的否定。
我试过像这样在绑定内部使用三元运算符：on:click={open ? disableScroll() : enableScroll() }

目前，我的代码如下所示：


    $: if (open === true) {
            onMount(() => {
                disableScroll()
            })
        } else if (open === false) {    
            onMount(() => {
                enableScroll()
            })
        }

也许我错误地使用了 onMount()？或者我需要以某种方式更改我的 if 语句以使其正确响应/以其他方式修复它？我很乐意提供一些帮助！谢谢。

Answer 1

onMount 只有 queues a function to run once，当组件被安装时。因此，如果组件已经呈现，运行ning onMount(() => { disableScroll() }) 将不会运行 disableScroll —— 对 open 的任何后续更改都不会产生任何影响。这就是您的代码不起作用的原因。

但是，您确实需要做一些事情来防止您的滚动代码在服务器上运行ning，因为 window 在服务器上不可用。在 SvelteKit 中，您可以使用 $app/env 中的 browser import 来确定您是否在浏览器中。这将告诉您在文档或 window 上访问仅限浏览器的 API 是否安全。因此，您可以执行以下操作：

<script>
    import { onMount } from 'svelte';
    import { browser } from '$app/env';

    let open;

    let scrollTop = null;
    let scrollLeft = null;

    function disableScroll() {
        if (browser) {
            scrollTop = 
                window.pageYOffset || window.document.documentElement.scrollTop;
            scrollLeft = 
                window.pageXOffset || window.document.documentElement.scrollLeft,
                window.onscroll = function() {
                window.scrollTo(scrollLeft, scrollTop);
            }};
        }

    function enableScroll() {
        if (browser) {
            window.onscroll = function() {};
        }
    };

    $: if (open) {
        disableScroll();
    } else {
        enableScroll();
    }
</script>

在 SvelteKit 中启用和禁用基于布尔值的滚动？

Enable and disable scroll based on boolean in SvelteKit?

html

javascript

css

svelte

sveltekit