在SvelteKit框架中不使用onMount如何用纯JavaScript实现滚动显示内容盒

完全可以不使用onMount实现需求，我们可以用更贴合Svelte框架特性、性能更优的方案替换原有逻辑，完全移除onMount调用：

方案1：使用IntersectionObserver + Svelte Action（更推荐） #

这个方案替换了高频触发的scroll监听事件，性能更优，且不需要查询全局DOM，逻辑和元素直接绑定：

<script>
// 定义展示动画的自定义Action
const lazyShow = (node) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 元素进入视口底部20%范围时触发展示，和原有逻辑效果一致
      node.classList.toggle('show', entry.isIntersecting);
    })
  }, {
    rootMargin: '0px 0px -20% 0px'
  })

  observer.observe(node)
  // 元素销毁时自动清除监听，避免内存泄漏
  return {
    destroy() {
      observer.unobserve(node)
    }
  }
}
</script>

<!-- 给每个内容盒直接绑定Action即可，不需要额外逻辑 -->
<div class="content" use:lazyShow>内容盒1</div>
<div class="content" use:lazyShow>内容盒2</div>
<div class="content" use:lazyShow>内容盒3</div>

<style>
/* 你原有.content和.show的样式保持不变即可 */
.content {
  transform: translateX(400px);
  opacity: 0;
  transition: 0.3s ease;
}
.content.show {
  transform: translateX(0);
  opacity: 1;
}
</style>

方案2：保留原有scroll逻辑，移除onMount #

如果你不想改动原有滚动判断逻辑，也可以用Svelte内置的window事件绑定和元素引用，直接去掉onMount：

<script>
// 存储所有内容盒的DOM引用
let contentBoxes = [];
const triggerPoint = (window.innerHeight / 5) * 4;

function checkBoxes() {
  contentBoxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top;
    box.classList.toggle('show', boxTop < triggerPoint);
  })
}
</script>

<!-- 直接绑定window的滚动和加载事件，不需要手动addEventListener -->
<svelte:window on:scroll={checkBoxes} on:load={checkBoxes} />

<div class="content" bind:this={contentBoxes[0]}>内容盒1</div>
<div class="content" bind:this={contentBoxes[1]}>内容盒2</div>
<div class="content" bind:this={contentBoxes[2]}>内容盒3</div>

效果示意图：

内容的提问来源于stack exchange，提问作者Sarah Diba