Sveltesveltewindow绑定

Svelte <svelte:window>绑定

我们还可以绑定某些属性到window事件例如 scrollY。更新代码第7行：<svelte:window bind:scrollY={y}/>可以绑定到的属性：​innerWidth​​innerHeight​​outerWidth​​outerHeight​​scrollX​​scrollY​​online​ ： ​window.navigator.onLine​的别名。除“scrollX”和“scrollY”外，其余的都是只读的。示例代码App.svelte<script>

const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];

let y;

</script>

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

<a class="parallax-container" href="https://www.firewatchgame.com" rel="external nofollow" target="_blank" >

{#each layers as layer}

<img

style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"

src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png" rel="external nofollow"

alt="parallax layer {layer}"

>

{/each}

</a>

<div class="text">

<span style="opacity: {1 - Math.max(0, y / 40)}">

scroll down

</span>

<div class="foreground">
    You have scrolled {y} pixels
</div>

</div>

<style>

.parallax-container {

position: fixed;

width: 2400px;

height: 712px;

left: 50%;

transform: translate(-50%,0);

}

.parallax-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
}
.parallax-container img:last-child::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(45,10,13);
}
.text {
    position: relative;
    width: 100%;
    height: 300vh;
    color: rgb(220,113,43);
    text-align: center;
    padding: 4em 0.5em 0.5em 0.5em;
    box-sizing: border-box;
    pointer-events: none;
}
span {
    display: block;
    font-size: 1em;
    text-transform: uppercase;
    will-change: transform, opacity;
}
.foreground {
    position: absolute;
    top: 711px;
    left: 0;
    width: 100%;
    height: calc(100% - 712px);
    background-color: rgb(32,0,1);
    color: white;
    padding: 50vh 0 0 0;
}
:global(body) {
    margin: 0;
    padding: 0;
    background-color: rgb(253, 174, 51);
}

</style>