diff --git a/.changeset/cyan-dodos-clap.md b/.changeset/cyan-dodos-clap.md new file mode 100644 index 000000000000..2f62027ac200 --- /dev/null +++ b/.changeset/cyan-dodos-clap.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +[fix] remove scroll handling code diff --git a/packages/kit/src/runtime/client/renderer.js b/packages/kit/src/runtime/client/renderer.js index c85fa5e23dd8..2bb940e9c937 100644 --- a/packages/kit/src/runtime/client/renderer.js +++ b/packages/kit/src/runtime/client/renderer.js @@ -294,7 +294,7 @@ export class Renderer { * @param {import('./types').NavigationInfo} info * @param {string[]} chain * @param {boolean} no_cache - * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean}} [opts] + * @param {{hash?: string, keepfocus: boolean}} [opts] */ async handle_navigation(info, chain, no_cache, opts) { if (this.started) { @@ -311,7 +311,7 @@ export class Renderer { * @param {import('./types').NavigationInfo} info * @param {string[]} chain * @param {boolean} no_cache - * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean}} [opts] + * @param {{hash?: string, keepfocus: boolean}} [opts] */ async update(info, chain, no_cache, opts) { const token = (this.token = {}); @@ -363,7 +363,7 @@ export class Renderer { // opts must be passed if we're navigating if (opts) { - const { scroll, keepfocus } = opts; + const { keepfocus } = opts; if (!keepfocus) { getSelection()?.removeAllRanges(); @@ -375,15 +375,8 @@ export class Renderer { if (this.autoscroll) { const deep_linked = info.url.hash && document.getElementById(info.url.hash.slice(1)); - if (scroll) { - scrollTo(scroll.x, scroll.y); - } else if (deep_linked) { - // Here we use `scrollIntoView` on the element instead of `scrollTo` - // because it natively supports the `scroll-margin` and `scroll-behavior` - // CSS properties. + if (deep_linked) { deep_linked.scrollIntoView(); - } else { - scrollTo(0, 0); } } } else { diff --git a/packages/kit/src/runtime/client/router.js b/packages/kit/src/runtime/client/router.js index c14ce0151763..377c215c1a2a 100644 --- a/packages/kit/src/runtime/client/router.js +++ b/packages/kit/src/runtime/client/router.js @@ -1,13 +1,6 @@ import { onMount } from 'svelte'; import { get_base_uri } from './utils'; -function scroll_state() { - return { - x: pageXOffset, - y: pageYOffset - }; -} - /** * @param {Event} event * @returns {HTMLAnchorElement | SVGAElement | undefined} @@ -72,14 +65,6 @@ export class Router { } init_listeners() { - if ('scrollRestoration' in history) { - history.scrollRestoration = 'manual'; - } - - // Adopted from Nuxt.js - // Reset scrollRestoration to auto when leaving page, allowing page reload - // and back-navigation from other pages to use the browser to restore the - // scrolling position. addEventListener('beforeunload', (e) => { let should_block = false; @@ -94,35 +79,9 @@ export class Router { if (should_block) { e.preventDefault(); e.returnValue = ''; - } else { - history.scrollRestoration = 'auto'; } }); - // Setting scrollRestoration to manual again when returning to this page. - addEventListener('load', () => { - history.scrollRestoration = 'manual'; - }); - - // There's no API to capture the scroll location right before the user - // hits the back/forward button, so we listen for scroll events - - /** @type {NodeJS.Timeout} */ - let scroll_timer; - addEventListener('scroll', () => { - clearTimeout(scroll_timer); - scroll_timer = setTimeout(() => { - // Store the scroll location in the history - // This will persist even if we navigate away from the site and come back - const new_state = { - ...(history.state || {}), - 'sveltekit:scroll': scroll_state() - }; - history.replaceState(new_state, document.title, window.location.href); - // iOS scroll event intervals happen between 30-150ms, sometimes around 200ms - }, 200); - }); - /** @param {Event} event */ const trigger_prefetch = (event) => { const a = find_anchor(event); @@ -189,19 +148,11 @@ export class Router { // Removing the hash does a full page navigation in the browser, so make sure a hash is present const [base, hash] = url.href.split('#'); if (hash !== undefined && base === location.href.split('#')[0]) { - // Call `pushState` to add url to history so going back works. - // Also make a delay, otherwise the browser default behaviour would not kick in - setTimeout(() => history.pushState({}, '', url.href)); - const info = this.parse(url); - if (info) { - return this.renderer.update(info, [], false); - } return; } this._navigate({ url, - scroll: a.hasAttribute('sveltekit:noscroll') ? scroll_state() : null, keepfocus: false, chain: [], details: { @@ -221,7 +172,6 @@ export class Router { this._navigate({ url: new URL(location.href), - scroll: event.state['sveltekit:scroll'], keepfocus: false, chain: [], details: null, @@ -279,7 +229,6 @@ export class Router { if (this.enabled) { return this._navigate({ url, - scroll: noscroll ? scroll_state() : null, keepfocus, chain, details: { @@ -348,7 +297,6 @@ export class Router { /** * @param {{ * url: URL; - * scroll: { x: number, y: number } | null; * keepfocus: boolean; * chain: string[]; * details: { @@ -359,7 +307,7 @@ export class Router { * blocked: () => void; * }} opts */ - async _navigate({ url, scroll, keepfocus, chain, details, accepted, blocked }) { + async _navigate({ url, keepfocus, chain, details, accepted, blocked }) { const from = this.renderer.current.url; let should_block = false; @@ -409,7 +357,6 @@ export class Router { } await this.renderer.handle_navigation(info, chain, false, { - scroll, keepfocus });