在 Sveltekit 框架中使用没有 "onMount" 的纯 javaScript

Question

有没有办法在不使用 onMount 的情况下使用简单的 JavaScript ？
如何改进这段代码而不使用 onMount？
（我想在用户滚动后添加每个内容框）

<script>
    import { onMount } from 'svelte';
    onMount(() => {
        const boxes = document.querySelectorAll('.content');
        window.addEventListener('scroll', checkBoxes);
        checkBoxes();
        function checkBoxes() {
            const triggerBottom = (window.innerHeight / 5) * 4;
            boxes.forEach((box) => {
                const boxTop = box.getBoundingClientRect().top;

                if (boxTop < triggerBottom) {
                    box.classList.add('show');
                } else {
                    box.classList.remove('show');
                }
            });
        }
    });
</script>

Answer 1

怎么样-

document.addEventListener("DOMContentLoaded", function(){
    // your code here will be executed on page ready/load
});

Answer 2

假设您的内容框是在数组中生成的，您可以使用 bind:this 和 svelte:window

的组合

<script>
 let boxes = [];
 let content = [];

 function checkBoxes() {
   // use boxes here
 }
</script>

<svelte:window on:scroll={checkBoxes} />

{#each content as c, i}
 <div bind:this={boxes[i]}>
   ....
 </div>
{/each}

或者，查看动作和 IntersectionObservers

在 Sveltekit 框架中使用没有 "onMount" 的纯 javaScript

Using pure javaScript without "onMount" in Sveltekit framework

javascript

css-animations

svelte

sveltekit