Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] Fix resetScrollPositions and restoreScrollPositions router methods #1980

Merged
merged 5 commits into from
Sep 19, 2024
Merged

[1.x] Fix resetScrollPositions and restoreScrollPositions router methods #1980

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d37fd06
Add nextFrame function
pedroborges Sep 19, 2024
7482e86
Format
pedroborges Sep 19, 2024
41822ed
Fix scroll-to-top flash when leaving page
pedroborges Sep 19, 2024
31e0072
Wrap resetScrollPositions in nextFrame
pedroborges Sep 19, 2024
e9d5353
Wrap restoreScrollPositions in nextFrame
pedroborges Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 23 additions & 16 deletions packages/core/src/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ import { hrefToUrl, mergeDataIntoQueryString, urlWithoutHash } from './url'

const isServer = typeof window === 'undefined'
const cloneSerializable = <T>(obj: T): T => JSON.parse(JSON.stringify(obj))
const nextFrame = (callback: () => void) => {
requestAnimationFrame(() => {
requestAnimationFrame(callback)
})
}

export class Router {
protected page!: Page
Expand Down Expand Up @@ -87,7 +92,7 @@ export class Router {
if (!this.page.url.includes(hash)) {
this.page.url += hash
}
this.setPage(page, { preserveScroll: true ,preserveState: true }).then(() => fireNavigateEvent(page))
this.setPage(page, { preserveScroll: true, preserveState: true }).then(() => fireNavigateEvent(page))
}

protected setupEventListeners(): void {
Expand Down Expand Up @@ -121,25 +126,27 @@ export class Router {
}

protected resetScrollPositions(): void {
window.scrollTo(0, 0)
this.scrollRegions().forEach((region) => {
if (typeof region.scrollTo === 'function') {
region.scrollTo(0, 0)
} else {
region.scrollTop = 0
region.scrollLeft = 0
nextFrame(() => {
window.scrollTo(0, 0)
this.scrollRegions().forEach((region) => {
if (typeof region.scrollTo === 'function') {
region.scrollTo(0, 0)
} else {
region.scrollTop = 0
region.scrollLeft = 0
}
})
this.saveScrollPositions()
if (window.location.hash) {
document.getElementById(window.location.hash.slice(1))?.scrollIntoView()
}
})
this.saveScrollPositions()
if (window.location.hash) {
// We're using a setTimeout() here as a workaround for a bug in the React adapter where the
// rendering isn't completing fast enough, causing the anchor link to not be scrolled to.
setTimeout(() => document.getElementById(window.location.hash.slice(1))?.scrollIntoView())
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setTimeout is no longer needed

}
}

protected restoreScrollPositions(): void {
if (this.page.scrollRegions) {
nextFrame(() => {
if (!this.page.scrollRegions) return

this.scrollRegions().forEach((region: Element, index: number) => {
const scrollPosition = this.page.scrollRegions[index]
if (!scrollPosition) {
Expand All @@ -151,7 +158,7 @@ export class Router {
region.scrollLeft = scrollPosition.left
}
})
}
})
}

protected isBackForwardVisit(): boolean {
Expand Down
Loading