https://github.com/harttle/scroll-restoration-demos
Demo for navigation-related browser bugs, scroll restoration, script caching, swipe gestures.
https://github.com/harttle/scroll-restoration-demos
popstate scroll-event scrollrestoration scrolly
Last synced: 5 months ago
JSON representation
Demo for navigation-related browser bugs, scroll restoration, script caching, swipe gestures.
- Host: GitHub
- URL: https://github.com/harttle/scroll-restoration-demos
- Owner: harttle
- Created: 2018-03-06T05:52:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-22T12:39:57.000Z (almost 8 years ago)
- Last Synced: 2025-01-29T15:13:12.070Z (over 1 year ago)
- Topics: popstate, scroll-event, scrollrestoration, scrolly
- Language: HTML
- Size: 6.84 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: history-restoration-timing.html
Awesome Lists containing this project
README
## history.scrollRestoration ALSO Affects External Links
Typically, you want set `history.scrollRestoration` to `manual` to allow custom transitions.
This API applies to the current entry,
which means the scroll state will also NOT be restored when navigating back from external links.
* Demo: http://harttle.github.io/scroll-restoration-demos/history-restoration.html
* Tutorial: https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
* Spec: https://majido.github.io/scroll-restoration-proposal/history-based-api.html
## Scroll Restoration Happens AFTER `popstate`
This means you can always get current scroll position on popstate,
but probably not in async callbacks (e.g. Promises).
The actual restoration timing is implementation-related:
It takes one [animation frame][requestAnimationFrame] in Chrome, and several more in Safari.
* Demo: http://harttle.github.io/scroll-restoration-demos/history-restoration-timing.html
## Get Scroll Position
To get scroll position, there's many APIs with different compatibility issues such as:
* `window.scrollY`
* `window.pageYOffset`
* `document.body.scrollTop`
* `document.documentElement.scrollTop`
* `document.scrollingElement.scrollTop`
Here we don't examine these APIs one by one, here's a demo to test with:
* Demo: http://harttle.github.io/scroll-restoration-demos/scroll-apis.html
* Tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
## NEVER Set scrollY or pageYOffset
Always use `scrollTo` to scroll your page.
Through `scrollY` and `pageYOffset` are NOT readonly, which means they can be set,
they WON'T change anymore once assigned. Take care!
* Tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
## scroll event not fired on UIWebview
Typically `scroll` event will be fired on scroll restoration.
Whereas for iOS UIWebview-based browsers no `scroll` event will be fired.
Try UC browser, Baidubox browser.
* Demo: http://harttle.github.io/scroll-restoration-demos/scroll-event.html
[requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame