janpaul123 / delayed-scroll-restoration-polyfill Goto Github PK
View Code? Open in Web Editor NEWPolyfill that mimics Chrome's scroll restoration behavior.
License: Other
delayed-scroll-restoration-polyfill's People
Contributors
Stargazers
Watchers
delayed-scroll-restoration-polyfill's Issues
The scroll restoring is happening only on IE and not mozilla and chrome
I have included this plugin and used for scroll position restoration when clicking back/forward button.
It's not working in chrome and Firefox and works in IE. FYI my website is built on Crownpeak CMS with pattern-lab gulp workflow.
There is no console errors too.
Installation guide for dummies , pretty please?
Hi, I really need to install this but my knowlege is limited.
Any chance you could make step by step intallation guide including latest version of the file for dummies like me.
Huge thank you!
URL Redirect Instead of Browser Back Button Press
Hi there.
First of all, thanks for the polyfill. Though, I have a question regarding its work.
Say, we have two pages: A (with vertical scrollbar) and B. We scroll down on A and then redirect to B (by using button click, which calls Angular Router.navigate() method). Then we press browser Back button - scroll position restores as expected. But if we back from B to A not by using browser Back button, but with URL redirect (by using click in breadcrumbs), then scroll doesn't restore.
The question is: is it by design or is it an issue? In any case, is there any way to achieve needed behavior with your polyfill?
Thanks in advance.
Navigating back performs full page refresh in Chrome iOS
- Visit the below html page in Chrome on iOS
- Dismiss the "Script evaluated" alert
- Click the "Go to another page" button
- Click the "Go back" button
Expect: Page to navigate back without a reload
Actual: Page reloads, as evidenced by the second "script evaluated" alert box
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/index.js"></script>
</head>
<body>
<button class="another-page-btn">
Go to another page
</button>
<button class="back-btn">
Go back
</button>
<script>
alert("Script evaluated");
document
.querySelector(".another-page-btn")
.addEventListener("click", e => {
window.history.pushState(null, "Another page", "/another-page");
});
document.querySelector(".back-btn").addEventListener("click", e => {
window.history.back();
});
</script>
</body>
</html>Example
The readme links to brigade.com as an example. Going to that page simply says "The Brigade brand and associated assets are for sale."
IE11 Compatibility
Transpiled this to EC5- works just fine aside from needing a polyfill for Number.isFinite- also needed to change the scrollX/Y properties to pageOffsetX/Y- similar to remix-run/react-router#605
Should I submit a pull request?
Outdated section on README regarding Custom Scroll Restoration API
The README says:
This problem can get solved when the Custom Scroll Restoration API gets widely implemented:
https://code.google.com/p/chromium/issues/detail?id=477353
http://majido.github.io/scroll-restoration-proposal
It looks to me like this has been implemented, so this text should probably be updated a bit
history.pushState not being called
When clicking my <a href="">s, pushState is not being called automatically.
(I added console logs to pushState, so I could watch when it's called...)
When I register the following code (below), which intercepts all <a href="">s and calls pushState, then pushState is (of course) called, and scroll is restored on browser back button.
function clickHandler(e) {
var e = window.e || e;
if (e.target.tagName !== 'A')
return;
window.history.pushState( {}, e.target.textContent, e.target.href);
// trigger our router through the hashchange event, or the page wont update
window.dispatchEvent(new Event('hashchange'));
}
if (document.addEventListener)
document.addEventListener('click', clickHandler, false);
else
document.attachEvent('onclick', clickHandler);
Without calling pushState manually like I do above, there never seems to be a state other than null in onPopState, so I never get scrolls restored...
Is that expected? I didn't see mention that we had to call pushState to get this to work.
(Using webpack with a custom router based on http://joakim.beng.se/blog/posts/a-javascript-router-in-20-lines.html)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.