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

Jump to bottom

fix: Several Fixes for Scroll Handling and Restoration #24306

Merged
merged 15 commits into from
Jun 19, 2020
Merged

fix: Several Fixes for Scroll Handling and Restoration #24306

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8373529
fix(gatsby-react-router-scroll): Major improvements to scroll handling
blainekasten May 20, 2020
23344c0
Finish migration and keep previous compatibility
blainekasten May 21, 2020
8c3cbe5
fix lints
blainekasten May 21, 2020
e00e94a
Update packages/gatsby-react-router-scroll/src/index.ts
blainekasten Jun 5, 2020
722d9ab
Update packages/gatsby-react-router-scroll/src/scroll-container.tsx
blainekasten Jun 5, 2020
9ed5960
Update packages/gatsby-react-router-scroll/src/scroll-handler.tsx
blainekasten Jun 5, 2020
5424060
fix a bug with state popping when saved state is set to 0
blainekasten Jun 5, 2020
7c6f0dc
merge master
blainekasten Jun 5, 2020
15596d6
use scrollTo
blainekasten Jun 5, 2020
d114260
deprecate scroll container
blainekasten Jun 5, 2020
5d2ce5b
add deprecation warning
blainekasten Jun 5, 2020
b93db89
Update packages/gatsby-react-router-scroll/src/scroll-container.tsx
blainekasten Jun 5, 2020
e9958ed
fix lint
blainekasten Jun 18, 2020
aa4d48d
remove null usage as it wasnt really used
blainekasten Jun 18, 2020
9cc5396
Fix tests and add more
blainekasten Jun 18, 2020
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
3 changes: 2 additions & 1 deletion packages/gatsby-react-router-scroll/src/scroll-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ class ScrollContainerImplementation extends React.Component<
})

const position = this.props.context.read(location, scrollKey)
node.scrollTo(0, position)

;(node.scrollTo || node.scroll).call(node, 0, position || 0)
}

render(): React.ReactNode {
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-react-router-scroll/src/scroll-handler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export class ScrollHandler extends React.Component<
scrollPosition = this._stateStorage.read(this.props.location, key)
}

if (scrollPosition) {
if (scrollPosition !== null) {
this.windowScroll(scrollPosition, prevProps)
} else if (hash) {
this.scrollToHash(decodeURI(hash), prevProps)
Expand All @@ -73,7 +73,7 @@ export class ScrollHandler extends React.Component<
prevProps: LocationContext | undefined
): void => {
if (this.shouldUpdateScroll(prevProps, this.props)) {
window.scroll(0, position)
;(window.scrollTo || window.scroll)(0, position)
blainekasten marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-react-router-scroll/src/session-storage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const STATE_KEY_PREFIX = `@@scroll|`
const GATSBY_ROUTER_SCROLL_STATE = `___GATSBY_REACT_ROUTER_SCROLL`

export class SessionStorage {
Copy link
Contributor

Choose a reason for hiding this comment

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

We should make this separate functions instead of a class for modification, something for a future PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think we maybe pass this to gatsby-browser functions. Something to consider

read(location: Location, key: string): number {
read(location: Location, key: string): number | null {
blainekasten marked this conversation as resolved.
Show resolved Hide resolved
const stateKey = this.getStateKey(location, key)

try {
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-react-router-scroll/src/use-scroll-restoration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function useScrollRestoration(
useLayoutEffect((): void => {
if (ref.current) {
const position = state.read(location, identifier)
ref.current.scrollTo(0, position)
ref.current.scrollTo(0, position || 0)
}
}, [])

Expand Down