Skip to content

Commit

Permalink
[fix] revert #2819 and add code comment (#2883)
Browse files Browse the repository at this point in the history
* [fix] revert #2819 and add code comment

* lint

* Update packages/kit/src/runtime/client/renderer.js

Co-authored-by: Bjorn Lu <34116392+bluwy@users.noreply.github.com>

* reverse condition

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
Co-authored-by: Bjorn Lu <34116392+bluwy@users.noreply.github.com>
  • Loading branch information
3 people authored Nov 24, 2021
1 parent 324e70a commit c87d055
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 35 deletions.
5 changes: 5 additions & 0 deletions .changeset/lucky-phones-march.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

[fix] revert #2819 and add code comment
76 changes: 41 additions & 35 deletions packages/kit/src/runtime/client/renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -275,44 +275,50 @@ export class Renderer {
this._init(navigation_result);
}

const { hash, scroll, keepfocus } = opts || {};
// opts must be passed if we're navigating...
if (opts) {
const { hash, scroll, keepfocus } = opts;

if (!keepfocus) {
getSelection()?.removeAllRanges();
document.body.focus();
}
if (!keepfocus) {
getSelection()?.removeAllRanges();
document.body.focus();
}

const old_page_y_offset = Math.round(pageYOffset);
const old_max_page_y_offset = document.documentElement.scrollHeight - innerHeight;

await 0;

const new_page_y_offset = Math.round(pageYOffset);
const new_max_page_y_offset = document.documentElement.scrollHeight - innerHeight;

// After `await 0`, the `onMount()` function in the component executed.
// Check if no scrolling happened on mount.
const no_scroll_happened =
// In most cases, we can compare whether `pageYOffset` changed between navigation
new_page_y_offset === Math.min(old_page_y_offset, new_max_page_y_offset) ||
// But if the page is scrolled to/near the bottom, the browser would also scroll
// to/near the bottom of the new page on navigation. Since we can't detect when this
// behaviour happens, we naively compare by the y offset from the bottom of the page.
old_max_page_y_offset - old_page_y_offset === new_max_page_y_offset - new_page_y_offset;

// If there was no scrolling, we run on our custom scroll handling
if (no_scroll_happened) {
const deep_linked = hash && document.getElementById(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.
deep_linked.scrollIntoView();
} else {
scrollTo(0, 0);
const old_page_y_offset = Math.round(pageYOffset);
const old_max_page_y_offset = document.documentElement.scrollHeight - innerHeight;

await 0;

const new_page_y_offset = Math.round(pageYOffset);
const new_max_page_y_offset = document.documentElement.scrollHeight - innerHeight;

// After `await 0`, the `onMount()` function in the component executed.
// Check if no scrolling happened on mount.
const no_scroll_happened =
// In most cases, we can compare whether `pageYOffset` changed between navigation
new_page_y_offset === Math.min(old_page_y_offset, new_max_page_y_offset) ||
// But if the page is scrolled to/near the bottom, the browser would also scroll
// to/near the bottom of the new page on navigation. Since we can't detect when this
// behaviour happens, we naively compare by the y offset from the bottom of the page.
old_max_page_y_offset - old_page_y_offset === new_max_page_y_offset - new_page_y_offset;

// If there was no scrolling, we run on our custom scroll handling
if (no_scroll_happened) {
const deep_linked = hash && document.getElementById(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.
deep_linked.scrollIntoView();
} else {
scrollTo(0, 0);
}
}
} else {
// ...they will not be supplied if we're simply invalidating
await 0;
}

this.loading.promise = null;
Expand Down

0 comments on commit c87d055

Please sign in to comment.