svelte/reactivity/window
此模块导出各种 window
值的反应版本,每个版本都有一个反应 current
属性,你可以在反应上下文(模板、deriveds 和 effects)中引用它,而无需使用 <svelte:window>
绑定或手动创建自己的事件监听器。
¥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>
import { innerWidth, innerHeight } from 'svelte/reactivity/window';
</script>
<p>{innerWidth.current}x{innerHeight.current}</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.
devicePixelRatio,
const innerHeight: ReactiveValue<number | undefined>
innerHeight.current
is a reactive view of window.innerHeight
. On the server it is undefined
.
innerHeight,
const innerWidth: ReactiveValue<number | undefined>
innerWidth.current
is a reactive view of window.innerWidth
. On the server it is undefined
.
innerWidth,
const online: ReactiveValue<boolean | undefined>
online.current
is a reactive view of navigator.onLine
. On the server it is undefined
.
online,
const outerHeight: ReactiveValue<number | undefined>
outerHeight.current
is a reactive view of window.outerHeight
. On the server it is undefined
.
outerHeight,
const outerWidth: ReactiveValue<number | undefined>
outerWidth.current
is a reactive view of window.outerWidth
. On the server it is undefined
.
outerWidth,
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
.
screenLeft,
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
.
screenTop,
const scrollX: ReactiveValue<number | undefined>
scrollX.current
is a reactive view of window.scrollX
. On the server it is undefined
.
scrollX,
const scrollY: ReactiveValue<number | undefined>
scrollY.current
is a reactive view of window.scrollY
. On the server it is undefined
.
scrollY
} from 'svelte/reactivity/window';
devicePixelRatio
自 5.11.0 起可用
¥Available since 5.11.0
devicePixelRatio.current
是 window.devicePixelRatio
的反应式视图。在服务器上它是 undefined
。请注意,不同浏览器的行为不同 - 在 Chrome 上,它将响应当前缩放级别,而在 Firefox 和 Safari 上则不会。
¥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.
const devicePixelRatio: {
get current(): number | undefined;
};
innerHeight
自 5.11.0 起可用
¥Available since 5.11.0
innerHeight.current
是 window.innerHeight
的反应式视图。在服务器上它是 undefined
。
¥innerHeight.current
is a reactive view of window.innerHeight
. On the server it is undefined
.
const innerHeight: ReactiveValue<number | undefined>;
innerWidth
自 5.11.0 起可用
¥Available since 5.11.0
innerWidth.current
是 window.innerWidth
的反应式视图。在服务器上它是 undefined
。
¥innerWidth.current
is a reactive view of window.innerWidth
. On the server it is undefined
.
const innerWidth: ReactiveValue<number | undefined>;
online
自 5.11.0 起可用
¥Available since 5.11.0
online.current
是 navigator.onLine
的反应式视图。在服务器上它是 undefined
。
¥online.current
is a reactive view of navigator.onLine
. On the server it is undefined
.
const online: ReactiveValue<boolean | undefined>;
outerHeight
自 5.11.0 起可用
¥Available since 5.11.0
outerHeight.current
是 window.outerHeight
的反应式视图。在服务器上它是 undefined
。
¥outerHeight.current
is a reactive view of window.outerHeight
. On the server it is undefined
.
const outerHeight: ReactiveValue<number | undefined>;
outerWidth
自 5.11.0 起可用
¥Available since 5.11.0
outerWidth.current
是 window.outerWidth
的反应式视图。在服务器上它是 undefined
。
¥outerWidth.current
is a reactive view of window.outerWidth
. On the server it is undefined
.
const outerWidth: ReactiveValue<number | undefined>;
screenLeft
自 5.11.0 起可用
¥Available since 5.11.0
screenLeft.current
是 window.screenLeft
的反应式视图。它在 requestAnimationFrame
回调中更新。在服务器上它是 undefined
。
¥screenLeft.current
is a reactive view of window.screenLeft
. It is updated inside a requestAnimationFrame
callback. On the server it is undefined
.
const screenLeft: ReactiveValue<number | undefined>;
screenTop
自 5.11.0 起可用
¥Available since 5.11.0
screenTop.current
是 window.screenTop
的反应式视图。它在 requestAnimationFrame
回调中更新。在服务器上它是 undefined
。
¥screenTop.current
is a reactive view of window.screenTop
. It is updated inside a requestAnimationFrame
callback. On the server it is undefined
.
const screenTop: ReactiveValue<number | undefined>;
scrollX
自 5.11.0 起可用
¥Available since 5.11.0
scrollX.current
是 window.scrollX
的反应式视图。在服务器上它是 undefined
。
¥scrollX.current
is a reactive view of window.scrollX
. On the server it is undefined
.
const scrollX: ReactiveValue<number | undefined>;
scrollY
自 5.11.0 起可用
¥Available since 5.11.0
scrollY.current
是 window.scrollY
的反应式视图。在服务器上它是 undefined
。
¥scrollY.current
is a reactive view of window.scrollY
. On the server it is undefined
.
const scrollY: ReactiveValue<number | undefined>;