Skip to main content

<svelte:window>

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

The <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
  • 在线 — 是 window.navigator.onLine 的别名
  • 设备像素比

所有除了 scrollXscrollY 都是只读的。

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

[注意] 注意,页面不会滚动到初始值以避免可访问性问题。只有对scrollXscrollY的绑定变量的后续更改将导致滚动。如果您在组件渲染时滚动有合法理由,请在$effect中调用scrollTo()

Edit this page on GitHub llms.txt