Fix: bind:scroll resets scroll state (#11469)

* Fixed: bind:scroll resets scroll state

* failing test

* bail if value is undefined

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/11474/head
Vladislav Logvin 8 months ago committed by GitHub
parent 6bd6f0971b
commit 85d680582b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: only initiate scroll if scroll binding has existing value

@ -32,7 +32,9 @@ export function bind_window_scroll(type, get_value, update) {
}; };
render_effect(() => { render_effect(() => {
latest_value = get_value() || 0; latest_value = get_value();
if (latest_value === undefined) return;
if (!scrolling) { if (!scrolling) {
scrolling = true; scrolling = true;
clearTimeout(timeout); clearTimeout(timeout);

@ -0,0 +1,5 @@
<script>
let scrollY;
</script>
<svelte:window bind:scrollY/>

@ -0,0 +1,30 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
/** @type {Window['scrollTo']} */
let original_scrollTo;
export default test({
before_test() {
original_scrollTo = window.scrollTo;
// @ts-ignore
window.scrollTo = (x, y) => {
window.scrollX = x;
window.scrollY = y;
};
},
after_test() {
window.scrollTo = original_scrollTo;
},
async test({ assert, component, window, target }) {
window.scrollTo(0, 500);
const button = target.querySelector('button');
flushSync(() => button?.click());
assert.equal(window.scrollY, 500);
}
});

@ -0,0 +1,13 @@
<script>
import Child from './Child.svelte';
let show = false;
</script>
<div style='width: 100%; height: 9999px;'></div>
<button on:click={() => show = !show}>toggle</button>
{#if show}
<Child />
{/if}
Loading…
Cancel
Save