<svelte:window>

<svelte:window onevent={handler} />

<svelte:window bind:prop={value} />

<svelte:window> 要素を使用すると、コンポーネントが破棄される際にイベントリスナーを削除する手間や、サーバーサイドレンダリング時に window の存在を確認する必要がなく、window オブジェクトにイベントリスナーを追加することができます。

この要素はコンポーネントのトップレベルにのみ配置できます — ブロックや他の要素の中に含めることはできません。

<script>
	function handleKeydown(event) {
		alert(`pressed the ${event.key} key`);
	}
</script>

<svelte:window onkeydown={handleKeydown} />

以下のプロパティにもバインドできます:

• innerWidth
• innerHeight
• outerWidth
• outerHeight
• scrollX
• scrollY
• online — an alias for window.navigator.onLine
• devicePixelRatio

scrollX と scrollY を除くすべてのプロパティは読取専用です。

<svelte:window bind:scrollY={y} />

アクセシビリティの問題を避けるため、ページは初期値にスクロールされません。scrollX や scrollY にバインドされた変数の変更があった場合のみスクロールが発生します。コンポーネントがレンダリングされたときにスクロールを発生させる正当な理由がある場合は、$effect 内で scrollTo() を呼び出してください。