Astro.jsでdocumentのイベントリスナーが残存する問題に対処する

• Astro.jsにはブラウザをリロードしないでページ遷移を行う仕組み(View transitions)がある
  • これにより、document以下を入れ替えるかたちでページ遷移するようになる
  • AstroPaperはこれを使っている
• View transitionsを使う場合、documentに登録したイベントリスナーはページを遷移しても残り続けるみたい
  • なので、以下のようにページ遷移時にイベントリスナーを取り除くようにしてみる

document.addEventListener("astro:page-load", () => {
    function handleScroll() {
        // 実際の処理
    }
    document.addEventListener("scroll", handleScroll);
    document.addEventListener(
      "astro:before-swap",
      () => {
        document.removeEventListener("scroll", handleScroll);
      },
      { once: true }
    );
});Copy

これは、ページが表示される手前に呼び出されるastro:page-loadで目的のイベントリスナーを追加して、ページ遷移によってdocumentが入れ替わる前に呼び出されるastro:before-swapでそのイベントリスナーを取り除きます。そのイベントリスナーを取り除くイベントリスナーは呼び出された後すぐに自身を取り除くようにonceオプションを付けています。

また、astro:before-swapと対になるastro:after-swapもありますが、こちらは新規に表示されるページでは呼び出されないため、この目的ではastro:page-loadでないといけません。

とりあえず、これで目的は達成できたと思いますが、そこまで詳細に調べていないので、もしかしたら、これらを自動でやってくれる仕組みがあったりするのでしょうか？