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

preserve scroll position on "back" #186

Closed
ryanflorence opened this issue Aug 11, 2014 · 11 comments · Fixed by #249
Closed

preserve scroll position on "back" #186

ryanflorence opened this issue Aug 11, 2014 · 11 comments · Fixed by #249
Milestone
window scrolling

Comments

@ryanflorence
Copy link
Member

The new auto-scrolling feature is fantastic, but traditionally when you click "back" in a website the browser remembers the scroll position.

We should too.
@ryanflorence ryanflorence changed the title preserver scroll position on "back" preserve scroll position on "back" Aug 11, 2014
@ryanflorence
Copy link
Member Author

as mentioned: #129 (comment)

@KyleAMathews
Copy link
Contributor

👍

@mjackson
Copy link
Member

How many levels of "back" do we want to support? I've experimented a little using Chrome, and it seems like it remembers a lot of history. e.g. I can get 10 pages deep and every time I click back the scroll position for that page is preserved.

@ryanflorence
Copy link
Member Author

ALL OF THEM

@ryanflorence
Copy link
Member Author

Seriously though, the only constraint is the memory used by holding onto an array of small integers, which I can't imagine ever really matters.

We'd need to do the same with forward too I guess.

@KyleAMathews
Copy link
Contributor

The problem I've seen with the browser maintained scroll position and SPA apps is the browser tries to move you to its remembered scroll position almost immediately after clicking back. So for long lists/tables (anything that takes a while to render) the browser scrolling fails as it scrolls you before the page is rendered.

@mjackson
Copy link
Member

Browsing around the React source this morning, I came across ReactMount.scrollMonitor which seems like it could be useful here, but I'm not quite sure how to use it.

@petehunt @spicyj Could this help us here?

@sophiebits
Copy link
Contributor

I don't think that's related and it's certainly not part of the current public API.

@mjackson mjackson added this to the window scrolling milestone Aug 29, 2014
mjackson added a commit that referenced this issue Aug 29, 2014
@mjackson
[fixed] Window scrolling
b7e21bb 
The router now remembers the last window scroll position at various
paths and automatically scrolls the window to match after transitions
complete unless preserveScrollPosition=true is used.

This commit also introduces a flux-style architecture to the high-level
transitionTo/replaceWith/goBack methods.

Fixes #189
Fixes #186
@mjackson mjackson mentioned this issue Aug 29, 2014
Merged
@greenlaw110
Copy link

I think only half side of the issue is closed. Here is the other side that is still an issue:

Suppose I have a page /products contains lots of data and hence needs scroll the window. Now I have scrolled on /products page for 300px for example and then I've navigated to other route. After a while I decide to come back to /products by clicking on the side navigation menu which is generated via Link component, I didn't hit the back button, the /products page will be scrolled to the top instead of restoring my previous position. How to deal with this case?

@arunkjn
Copy link

arunkjn commented Feb 13, 2017

@greenlaw110 I have the same issue. Did you find a solution to this?

@greenlaw110
Copy link

@arunkjn sorry it was long time ago. I can't remember clearly but I don't think it is resolved.

@remix-run remix-run locked and limited conversation to collaborators Feb 13, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
window scrolling
Development

Successfully merging a pull request may close this issue.

[fixed] Window scrolling remix-run/react-router
6 participants
@sophiebits @KyleAMathews @mjackson @ryanflorence @greenlaw110 @arunkjn