跳至主要内容

<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
  • onlinewindow.navigator.onLine 的别名
  • devicePixelRatio

除了 scrollXscrollY 之外,所有属性都是只读的。

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

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

在 GitHub 上编辑此页面