Svelte • Reference

svelte/reactivity/window

On this page

scrollX
scrollY
innerWidth
innerHeight
outerWidth
outerHeight
screenLeft
screenTop
online
devicePixelRatio

This module exports reactive versions of various window values, each of which has a reactive current property that you can reference in reactive contexts (templates, deriveds and effects) without using <svelte:window> bindings or manually creating your own event listeners.

<script lang="ts">
	import { const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
@since5.11.0innerWidth, const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
@since5.11.0innerHeight } from 'svelte/reactivity/window';
</script>

<p>{const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
@since5.11.0innerWidth.ReactiveValue<number | undefined>.current: number | undefinedcurrent}x{const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
@since5.11.0innerHeight.ReactiveValue<number | undefined>.current: number | undefinedcurrent}</p>

<script>
	import { const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
@since5.11.0innerWidth, const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
@since5.11.0innerHeight } from 'svelte/reactivity/window';
</script>

<p>{const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
@since5.11.0innerWidth.ReactiveValue<number | undefined>.current: number | undefinedcurrent}x{const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
@since5.11.0innerHeight.ReactiveValue<number | undefined>.current: number | undefinedcurrent}</p>

import {
	const devicePixelRatio: {
    readonly current: number | undefined;
}devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined.
Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
on Firefox and Safari it won't.
@since5.11.0const devicePixelRatio: {
    readonly current: number | undefined;
}devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined.
Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
on Firefox and Safari it won't.
@since5.11.0devicePixelRatio,
	const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
@since5.11.0const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
@since5.11.0innerHeight,
	const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
@since5.11.0const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
@since5.11.0innerWidth,
	const online: ReactiveValue<boolean | undefined>online.current is a reactive view of navigator.onLine. On the server it is undefined.
@since5.11.0const online: ReactiveValue<boolean | undefined>online.current is a reactive view of navigator.onLine. On the server it is undefined.
@since5.11.0online,
	const outerHeight: ReactiveValue<number | undefined>outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.
@since5.11.0const outerHeight: ReactiveValue<number | undefined>outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.
@since5.11.0outerHeight,
	const outerWidth: ReactiveValue<number | undefined>outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.
@since5.11.0const outerWidth: ReactiveValue<number | undefined>outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.
@since5.11.0outerWidth,
	const screenLeft: ReactiveValue<number | undefined>screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
@since5.11.0const screenLeft: ReactiveValue<number | undefined>screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
@since5.11.0screenLeft,
	const screenTop: ReactiveValue<number | undefined>screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
@since5.11.0const screenTop: ReactiveValue<number | undefined>screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
@since5.11.0screenTop,
	const scrollX: ReactiveValue<number | undefined>scrollX.current is a reactive view of window.scrollX. On the server it is undefined.
@since5.11.0const scrollX: ReactiveValue<number | undefined>scrollX.current is a reactive view of window.scrollX. On the server it is undefined.
@since5.11.0scrollX,
	const scrollY: ReactiveValue<number | undefined>scrollY.current is a reactive view of window.scrollY. On the server it is undefined.
@since5.11.0const scrollY: ReactiveValue<number | undefined>scrollY.current is a reactive view of window.scrollY. On the server it is undefined.
@since5.11.0scrollY
} from 'svelte/reactivity/window';

scrollX

scrollX.current is a reactive view of window.scrollX. On the server it is undefined.

export const scrollX: ReactiveValue<number | undefined>;

scrollY

scrollY.current is a reactive view of window.scrollY. On the server it is undefined.

export const scrollY: ReactiveValue<number | undefined>;

innerWidth

innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.

export const innerWidth: ReactiveValue<number | undefined>;

innerHeight

innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.

export const innerHeight: ReactiveValue<number | undefined>;

outerWidth

outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.

export const outerWidth: ReactiveValue<number | undefined>;

outerHeight

outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.

export const outerHeight: ReactiveValue<number | undefined>;

screenLeft

screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.

export const screenLeft: ReactiveValue<number | undefined>;

screenTop

screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.

export const screenTop: ReactiveValue<number | undefined>;

online

online.current is a reactive view of navigator.onLine. On the server it is undefined.

export const online: ReactiveValue<boolean | undefined>;

devicePixelRatio

devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined. Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, on Firefox and Safari it won't.

export const devicePixelRatio: {
		get current(): number | undefined;
	};