<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 - window.navigator.onLine のエイリアスです
• devicePixelRatio

scrollX と scrollY を除くすべてはreadonly です。

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

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