<svelte:window>

Add event listeners and bindings to the window object

<svelte:window onevent={handler} />

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

The <svelte:window> element allows you to add event listeners to the window object without worrying about removing them when the component is destroyed, or checking for the existence of window when server-side rendering.

This element may only appear at the top level of your component — it cannot be inside a block or element.

Event Listeners

You can add any valid window event listener using the on directive:

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

<svelte:window onkeydown={handleKeydown} />

Common window events

• onresize - Window is resized
• onscroll - Window is scrolled
• onfocus - Window gains focus
• onblur - Window loses focus
• onkeydown - Key is pressed
• onkeyup - Key is released
• onmousemove - Mouse moves
• onbeforeunload - Before window unloads

Bindings

You can bind to the following window properties:

innerWidth · number

The inner width of the window in pixels.

innerHeight · number

The inner height of the window in pixels.

outerWidth · number

The outer width of the window in pixels.

outerHeight · number

The outer height of the window in pixels.

scrollX · number

The horizontal scroll position in pixels. Can be set to scroll the window.

scrollY · number

The vertical scroll position in pixels. Can be set to scroll the window.

online · boolean

Whether the browser is online. An alias for window.navigator.onLine.

devicePixelRatio · number

The ratio of physical pixels to CSS pixels for the current display.

Usage

Track window dimensions

<script>
  let width = $state(0);
  let height = $state(0);
</script>

<svelte:window bind:innerWidth={width} bind:innerHeight={height} />

<p>Window size: {width} x {height}</p>

Scroll control

<script>
  let y = $state(0);
</script>

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

<p>Scroll position: {y}</p>

<button onclick={() => y = 0}>
  Scroll to top
</button>

The page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of scrollX and scrollY will cause scrolling.

If you have a legitimate reason to scroll when the component is rendered, call scrollTo() in an $effect.

Track online status

<script>
  let online = $state(true);
</script>

<svelte:window bind:online />

{#if !online}
  <div class="offline-warning">
    You are currently offline
  </div>
{/if}

Multiple bindings and events

<script>
  let scrollY = $state(0);
  let innerHeight = $state(0);
  
  function handleKeydown(event) {
    if (event.key === 'Escape') {
      console.log('Escape pressed');
    }
  }
  
  function handleResize() {
    console.log('Window resized');
  }
</script>

<svelte:window 
  bind:scrollY
  bind:innerHeight
  onkeydown={handleKeydown}
  onresize={handleResize}
/>