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

Reset scroll position on new navigation. #285

Closed
nicksay opened this issue Feb 11, 2015 · 1 comment · Fixed by #321
Closed

Reset scroll position on new navigation. #285

nicksay opened this issue Feb 11, 2015 · 1 comment · Fixed by #321
Labels
enhancement
Milestone
SPF 22 (v2.2.0)

Comments

@nicksay
Copy link
Contributor

nicksay commented Feb 11, 2015

As a follow up to #263, which covered restoring scroll position on back and forward, SPF should also reset the scroll position (to top) on new navigation.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 12, 2015
@nicksay
Refactor spf.nav to create an object for handling request data.
8229cc7 
Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 12, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 12, 2015
@nicksay
Refactor spf.nav to create and pass the request data object consisten…
31eb330 
…tly.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 12, 2015
@nicksay
Refactor spf.nav to create and pass the request data object consisten…
6d6bd11 
…tly.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 12, 2015
@nicksay
Refactor spf.nav to create and pass the request data consistently.
5f9af52 
Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 12, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Refactor spf.nav to create and pass the request data consistently.
47b61aa 
Progress on youtube#285.
@nicksay nicksay added this to the SPF 22 milestone Feb 13, 2015
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Refactor spf.nav to include more data in the request info object.
a5d48b7 
Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Refactor spf.nav to use a dedicated class for navigation info.
3d16ca4 
Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Scroll to top when first processing html during navigation (experimen…
bd605d9 
…tal).

- If a position is stored in history, don't scroll to top and instead scroll
  to the saved position after processing is complete.
- Guard the scroll-to-top behavior with an `experimental-scroll-position`
  config.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Scroll to top during navigation processing (experimental).
28d0636 
- Scroll to top when processing the first html fragment of a response.
- If a position is stored in history, don't scroll to top and instead scroll
  to the saved position after processing is complete.
- Guard the new scroll-to-top behavior with an `experimental-scroll-position`
  config.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Refactor spf.nav to include more data in the request info object.
b56d35a 
Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 13, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Refactor spf.nav to use a dedicated class for navigation info.
03a47c3 
Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 13, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Scroll to top during navigation processing (experimental).
a343d33 
- Scroll to top when processing the first html fragment of a response.
- If a position is stored in history, don't scroll to top and instead scroll
  to the saved position after processing is complete.
- Guard the new scroll-to-top behavior with an `experimental-scroll-position`
  config.

Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 13, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Scroll to top during navigation processing (experimental).
ad6a5bb 
- Scroll to top when processing the first html fragment of a response.
- If a position is stored in history, don't scroll to top and instead scroll
  to the saved position after processing is complete.
- Guard the new scroll-to-top behavior with an `experimental-scroll-position`
  config.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 13, 2015
@nicksay
Scroll to top during navigation processing (experimental).
03765e4 
- Scroll to top when processing the first html fragment of a response.
- If a position is stored in history, don't scroll to top and instead scroll
  to the saved position after processing is complete.
- Guard the new scroll-to-top behavior with an `experimental-scroll-position`
  config.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 25, 2015
@nicksay
Prevent early scrolling during history navigation (experimental).
7729bc9 
When handling a history change event, save the current position and scroll to
that (current) position immediately after handling the event to prevent the
browser from incorrectly scrolling too early.

The browser default behavior is to scroll to the position when `pushState` was
called just after firing a `popState` event.  This is okay only if using
`pushState` to move around a single page or if all content can be rendered
synchronously during the `popState` event handling.  Since navigation content
updates are asynchronous (either from cache or from network), avoid this early
scroll by immediately scrolling back to the current position after the event.
The proper position is then (re)set once the content is updated.

Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 25, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 25, 2015
@nicksay
Prevent early scrolling during history navigation (experimental).
740131f 
When handling a history change event, save the current position and scroll to
that (current) position immediately after handling the event to prevent the
browser from incorrectly scrolling too early.

The browser default behavior is to scroll to the position when `pushState` was
called just after firing a `popState` event.  This is okay only if using
`pushState` to move around a single page or if all content can be rendered
synchronously during the `popState` event handling.  Since navigation content
updates are asynchronous (either from cache or from network), avoid this early
scroll by immediately scrolling back to the current position after the event.
The proper position is then (re)set once the content is updated.

For now, guard this behavior behind the `experimental-scroll-position` config.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 26, 2015
@nicksay
Use consistently named state keys for navigation event listeners.
bdde825 
Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 26, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 27, 2015
@nicksay
Alternate approach to prevent early scrolling during navigation.
6072071 
The current approach to preventing early scrolling during navigation uses the
the current position during a history change event and scrolls to that position
after the event has been handled using `setTimeout`.  This leads to a brief
flash of incorrect position (aka jank) during history navigation because too
much time elapses between the browser's early scroll and the reset call.

Instead, during the history change event, save the current position.  During
the next scroll, if a position has been saved, scroll to it immediately (and
delete the saved position).  This executes the reset call in the same
synchronous operation as the browser's early scroll and eliminates the flash
of incorrect position.

Progress on youtube#285.
@nicksay nicksay mentioned this issue Feb 27, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 27, 2015
@nicksay
Alternate approach to prevent early scrolling during navigation.
4989e8f 
The current approach to preventing early scrolling during navigation uses the
the current position during a history change event and scrolls to that position
after the event has been handled using `setTimeout`.  This leads to a brief
flash of incorrect position (aka jank) during history navigation because too
much time elapses between the browser's early scroll and the reset call.

Instead, during the history change event, save the current position.  During
the next scroll, if a position has been saved, scroll to it immediately (and
delete the saved position).  This executes the reset call in the same
synchronous operation as the browser's early scroll and eliminates the flash
of incorrect position.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 12, 2015
@nicksay
Alternate approach to prevent early scrolling during navigation.
b1cd72a 
The current approach to preventing early scrolling during navigation uses the
the current position during a history change event and scrolls to that position
after the event has been handled using `setTimeout`.  This leads to a brief
flash of incorrect position (aka jank) during history navigation because too
much time elapses between the browser's early scroll and the reset call.

Instead, during the history change event, save the current position.  During
the next scroll, if a position has been saved, scroll to it immediately (and
delete the saved position).  This executes the reset call in the same
synchronous operation as the browser's early scroll and eliminates the flash
of incorrect position.

Progress on youtube#285.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 12, 2015
@nicksay
Alternate approach to prevent early scrolling during navigation.
87151f0 
The current approach to preventing early scrolling during navigation uses the
the current position during a history change event and scrolls to that position
after the event has been handled using `setTimeout`.  This leads to a brief
flash of incorrect position (aka jank) during history navigation because too
much time elapses between the browser's early scroll and the reset call.

Instead, during the history change event, save the current position.  During
the next scroll, if a position has been saved, scroll to it immediately (and
delete the saved position).  This executes the reset call in the same
synchronous operation as the browser's early scroll and eliminates the flash
of incorrect position.

Progress on youtube#285.
@nicksay
Copy link
Contributor Author

nicksay commented Apr 8, 2015

After experimentation, this is ready to be released!

nicksay added a commit to nicksay/spfjs that referenced this issue Apr 8, 2015
@nicksay
Release "scroll to top during navigation".
cd01466 
Promote previous `experimental-scroll-position` logic to be always enabled.

This enables scrolling to top when processing the first HTML fragment of a
new response.  If navigating to previous entry and a position is stored in
history, the saved position will be scrolled to after processing is complete.

Closes youtube#285.
@nicksay nicksay mentioned this issue Apr 8, 2015
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
SPF 22 (v2.2.0)
Development

Successfully merging a pull request may close this issue.

Release "scroll to top during navigation". nicksay/spfjs
1 participant
@nicksay