{"_id":"delayed-scroll-restoration-polyfill","_rev":"5-d64b59bbb08c840c4d1fde31b39cba1d","name":"delayed-scroll-restoration-polyfill","description":"Polyfill that mimics Chrome's scroll restoration behavior.","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"delayed-scroll-restoration-polyfill","version":"0.1.0","description":"Limited polyfill for Chrome's delayed scroll restoration behavior.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/brigade/delayed-scroll-restoration-polyfill.git"},"homepage":"https://github.com/brigade/delayed-scroll-restoration-polyfill","bugs":{"url":"https://github.com/brigade/delayed-scroll-restoration-polyfill/issues"},"scripts":{"build-npm":"babel index.es6.js --out-file index.js","prepublish":"npm run build-npm"},"author":{"name":"Brigade Engineering"},"contributors":[{"name":"Jan Paul Posma","email":"jp.posma@brigade.com"}],"license":"MIT","devDependencies":{"babel":"^5.1.9","babel-core":"^5.1.9","eslint":"^1.3.1","eslint-config-brigade":"^1.6.0"},"keywords":["scroll","restoration","polyfill"],"gitHead":"8d5e6f045b724451ed98a72114570c39248e0517","_id":"delayed-scroll-restoration-polyfill@0.1.0","_shasum":"f0d33ac18d53cb6ba56650ccd2dad55c3227fbd8","_from":".","_npmVersion":"3.3.12","_nodeVersion":"0.12.7","_npmUser":{"name":"janpaul123","email":"me@janpaulposma.nl"},"dist":{"shasum":"f0d33ac18d53cb6ba56650ccd2dad55c3227fbd8","tarball":"https://registry.npmjs.org/delayed-scroll-restoration-polyfill/-/delayed-scroll-restoration-polyfill-0.1.0.tgz","integrity":"sha512-Mm4xwznkCHLcLgWp7eskCDIP2D5yzJCQMz11QnwZTqBpfjJmDt937h+x4qZBXKhWdz8dpCDAWzXvqbBtFwUjlA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+XpXsIQpUE0F2FnBxnoISR5XrPc9Tzp3lEq2toQMXbQIgfaLCGv2iditXG24UHqVUEoMqbbUARGSSNVjncEOnm8o="}]},"maintainers":[{"name":"janpaul123","email":"me@janpaulposma.nl"}]},"0.1.1":{"name":"delayed-scroll-restoration-polyfill","version":"0.1.1","description":"Polyfill that mimics Chrome's scroll restoration behavior.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/brigade/delayed-scroll-restoration-polyfill.git"},"homepage":"https://github.com/brigade/delayed-scroll-restoration-polyfill","bugs":{"url":"https://github.com/brigade/delayed-scroll-restoration-polyfill/issues"},"scripts":{"build-npm":"babel index.es6.js --out-file index.js","prepublish":"npm run build-npm"},"author":{"name":"Brigade Engineering"},"contributors":[{"name":"Jan Paul Posma","email":"jp.posma@brigade.com"}],"license":"MIT","devDependencies":{"babel-cli":"^6.2.0","babel-preset-es2015":"^6.1.18","eslint":"^1.10.1","eslint-config-brigade":"^1.9.0"},"keywords":["scroll","restoration","polyfill"],"gitHead":"b10650c5fdf39d5adc262948f511a2470350f5ea","_id":"delayed-scroll-restoration-polyfill@0.1.1","_shasum":"f770175da3f8e565fea993162b4c539e701f7a0f","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.1.0","_npmUser":{"name":"brigade","email":"services+npm@brigade.com"},"dist":{"shasum":"f770175da3f8e565fea993162b4c539e701f7a0f","tarball":"https://registry.npmjs.org/delayed-scroll-restoration-polyfill/-/delayed-scroll-restoration-polyfill-0.1.1.tgz","integrity":"sha512-DcDEi1224qIzuVKJrOelOZvJd3pKsxdiAiG0hVvti/CVXBbdRlqMDZigX1Wqx+jTj6kk0+TQT7fPK8I1khBvAQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVDxd4XjRiPgbw/OuA9M0vbWsUI0E+njTqVlSxZL5lYAiB/E6ZfD+X8hzEmm+frYz0NsrQ9SIG2csqUJdOBHPZaiQ=="}]},"maintainers":[{"name":"brigade","email":"services+npm@brigade.com"},{"name":"janpaul123","email":"me@janpaulposma.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/delayed-scroll-restoration-polyfill-0.1.1.tgz_1501658675991_0.07104817777872086"}}},"readme":"# Polyfill that mimics Chrome's scroll restoration behavior\n\nIn single page apps that use the history API for navigation, the DOM is\ntypically not completely ready immediately when the `popstate` event is\nfired, as opposed to traditional applications where after page load the\npage is completely filled with content.\n\nThis means that the scroll position cannot be set until the AJAX requests\nhave finished loading, and the page is fully rendered. It seems that Chrome\nimplements this behavior by looking at AJAX requests made by the page,\nand not restoring the scroll position until these have finished, unless\nit is already possible earlier (e.g. if the page already has the correct\nheight).\n\nSee [Chrome's implementation](https://chromium.googlesource.com/chromium/blink/+/5da5b59/Source/core/loader/FrameLoader.cpp#1049).\n\nThis polyfill tries to mimic that behavior, though it is a rather limited\nimplementation because of browser differences and insufficient browser APIs.\n\nCheck out [Brigade.com](https://brigade.com) for an example:\n\n![Demo on Brigade.com](https://raw.github.com/brigade/delayed-scroll-restoration-polyfill/master/demo.gif)\n\n## Usage\n\n### npm\n```\nnpm install delayed-scroll-restoration-polyfill --save\n```\n\n### bower\n```\nbower install delayed-scroll-restoration-polyfill --save\n```\n\n### In your HTML\n```html\n<script src='node_modules/delayed-scroll-restoration-polyfill/index.js'></script>\n```\n\n## How it works\n\n1. We overwrite `history.pushState` to record the current scroll position\n   when navigating to a new page.\n2. We also overwrite `history.replaceState` to avoid overwriting this scroll\n   position.\n3. Finally, we listen to the `popstate` event, and when it's fired we keep\n   trying to restore the scroll position, which we only do if the page\n   actually  has the correct width and height.\n4. After a few seconds we time out and scroll as far as we can.\n\n## Disabling native implementations\n\nWhile this polyfill is designed to work alongside native implementations, if you\nnevertheless experience compatibility problems, we suggest you disable native\nscroll restoration in browsers that support it, like this:\n\n```js\nif ('scrollRestoration' in window.history) {\n  window.history.scrollRestoration = 'manual';\n}\n```\n\n## Differences from Chrome's native implementation\n\n1. We use a timeout instead of checking which resources are loaded and such,\n   because it's more convenient and it doesn't seem to matter much in practice.\n   This does imply that if the user resizes the browser window during their\n   session, causing pages to become less high (e.g. by making the window wider),\n   then we might not restore the scroll position until we time out.\n\n2. We don't abort restoring the scroll position when the user scrolls,\n   because we cannot detect a user scroll from a browser scroll (e.g. because\n   the page height changes), which the browser can do natively.\n\n   Note that we cannot reliably detect if we are in a browser that already\n   supports the delayed scroll restoration behavior, so this polyfill will\n   break Chrome's behavior of aborting scroll restoration on user scroll.\n\n3. We don't record the scroll position when clicking the back button, only\n   when using `history.pushState`. This means that we don't get delayed scroll\n   restoration when clicking the forward button in the browser. The reason for\n   this is that we cannot reliably store the scroll position when the back\n   button is clicked, due to spec / browser implementation. See:\n   - https://github.com/rackt/react-router/issues/707#issuecomment-71552632\n   - https://bugzilla.mozilla.org/show_bug.cgi?id=1155730#c1\n   - https://bugzilla.mozilla.org/show_bug.cgi?id=679458#c16\n\n   This problem can get solved when the Custom Scroll Restoration API gets\n   widely implemented:\n   - https://code.google.com/p/chromium/issues/detail?id=477353\n   - http://majido.github.io/scroll-restoration-proposal\n\n4. The polyfill assumes that on `popstate` the page is cleared, or at least\n   that the height will only increase right after `popstate`. We do wait a tick\n   to make sure that your code gets run before we attempt to scroll, but if the\n   page height decreases after that then we might have already scrolled and we\n   won't wait until the page height increases again.\n\n* * *\n\nNote that this polyfill just aims to mimic Chrome's behavior as closely\nas possible, and does not attempt to keep scrolling down in cases when an\ninfinite list is not fully loaded. That case would also break in Chrome,\nand so you need to provide sufficient caching yourself so that when\nnavigating back to a page it can render again relatively quickly.\n\n## Changelog\n\nIf you're interested in seeing the changes and bug fixes between each version,\nread the [Changelog](CHANGELOG.md).\n\n## Code of conduct\n\nThis project adheres to the [Open Code of Conduct][code-of-conduct]. By\nparticipating, you are expected to honor this code.\n\n[code-of-conduct]: https://github.com/brigade/code-of-conduct\n\n## License\n\nThis project is released under the [MIT license](MIT-LICENSE).\n","maintainers":[{"name":"brigade","email":"services+npm@brigade.com"},{"name":"janpaul123","email":"me@janpaulposma.nl"}],"time":{"modified":"2022-06-14T23:48:41.957Z","created":"2015-11-21T21:23:27.197Z","0.1.0":"2015-11-21T21:23:27.197Z","0.1.1":"2017-08-02T07:24:37.196Z"},"homepage":"https://github.com/brigade/delayed-scroll-restoration-polyfill","keywords":["scroll","restoration","polyfill"],"repository":{"type":"git","url":"git+https://github.com/brigade/delayed-scroll-restoration-polyfill.git"},"contributors":[{"name":"Jan Paul Posma","email":"jp.posma@brigade.com"}],"author":{"name":"Brigade Engineering"},"bugs":{"url":"https://github.com/brigade/delayed-scroll-restoration-polyfill/issues"},"license":"MIT","readmeFilename":"README.md"}