{"_id":"@mapbox/scroll-restorer","_rev":"411158","name":"@mapbox/scroll-restorer","description":"Preserve scroll state while navigating client-side routes","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"time":{"modified":"2021-08-04T05:09:01.000Z","created":"2017-07-06T22:48:27.842Z","1.0.0":"2017-09-08T22:34:44.034Z","0.1.0":"2017-07-06T22:48:27.842Z"},"users":{},"author":{"name":"Mapbox"},"repository":{"type":"git","url":"git+https://github.com/mapbox/scroll-restorer.git"},"versions":{"1.0.0":{"name":"@mapbox/scroll-restorer","version":"1.0.0","description":"Preserve scroll state while navigating client-side routes","main":"index.js","scripts":{"precommit":"lint-staged","format":"prettier --single-quote --write '{,test/**/}*.js'","lint":"eslint .","start-example-app":"webpack-dev-server --config ./example/webpack.config.js --content-base ./example","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/scroll-restorer.git"},"keywords":["scroll-restoration","scroll","restore","routing","router"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/scroll-restorer/issues"},"homepage":"https://github.com/mapbox/scroll-restorer#readme","devDependencies":{"babel-core":"^6.25.0","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","eslint":"^4.1.1","eslint-plugin-react":"^7.1.0","husky":"^0.14.1","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"^1.5.2","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-router-dom":"^4.1.1","webpack":"^3.0.0","webpack-dev-server":"^2.5.0"},"jest":{"coverageReporters":["json","lcov","text","html"],"resetMocks":true,"roots":["./test"],"testRegex":".*\\.test\\.js$"},"lint-staged":{"{,test/**/}*.js":["eslint","prettier --single-quote --write","git add"]},"dependencies":{"debounce":"^1.0.2","xtend":"^4.0.1"},"gitHead":"1d187db54cefec24e5618fd8a595392a6de742cf","_id":"@mapbox/scroll-restorer@1.0.0","_npmVersion":"5.4.1","_nodeVersion":"6.11.1","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"a4eb70a4266612d8e638ff8857c295d57c1c8ead","size":58096,"noattachment":false,"key":"/@mapbox/scroll-restorer/-/@mapbox/scroll-restorer-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/scroll-restorer/download/@mapbox/scroll-restorer-1.0.0.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scroll-restorer-1.0.0.tgz_1504910083939_0.5922454765532166"},"directories":{},"publish_time":1504910084034,"_hasShrinkwrap":false,"_cnpm_publish_time":1504910084034},"0.1.0":{"name":"@mapbox/scroll-restorer","version":"0.1.0","description":"Preserve scroll state while navigating client-side routes","main":"index.js","scripts":{"precommit":"lint-staged","format":"prettier --single-quote --write '{,test/**/}*.js'","lint":"eslint .","start-example-app":"webpack-dev-server --config ./example/webpack.config.js --content-base ./example","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/scroll-restorer.git"},"keywords":["scroll-restoration","scroll","restore","routing","router"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/scroll-restorer/issues"},"homepage":"https://github.com/mapbox/scroll-restorer#readme","devDependencies":{"babel-core":"^6.25.0","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","eslint":"^4.1.1","eslint-plugin-react":"^7.1.0","husky":"^0.14.1","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"^1.5.2","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-router-dom":"^4.1.1","webpack":"^3.0.0","webpack-dev-server":"^2.5.0"},"jest":{"coverageReporters":["json","lcov","text","html"],"resetMocks":true,"roots":["./test"],"testRegex":".*\\.test\\.js$"},"lint-staged":{"{,test/**/}*.js":["eslint","prettier --single-quote --write","git add"]},"dependencies":{"debounce":"^1.0.2","xtend":"^4.0.1"},"gitHead":"edff9384109eb39a04f5590ade228fb153c3edce","_id":"@mapbox/scroll-restorer@0.1.0","_shasum":"78412dba58a58f2a2ca187c891894a096c6d158d","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"johnfurrow","email":"hello@johnfurrow.com"},"dist":{"shasum":"78412dba58a58f2a2ca187c891894a096c6d158d","size":26790,"noattachment":false,"key":"/@mapbox/scroll-restorer/-/@mapbox/scroll-restorer-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/scroll-restorer/download/@mapbox/scroll-restorer-0.1.0.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scroll-restorer-0.1.0.tgz_1499381307727_0.9188319114036858"},"directories":{},"publish_time":1499381307842,"_hasShrinkwrap":false,"_cnpm_publish_time":1499381307842}},"readme":"# @mapbox/scroll-restorer\n\nPreserve the scroll state of [`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement) while navigating programmatically through history states — that is, client-side routing.\n\n## Installation\n\n```\nnpm install @mapbox/scroll-restorer\n```\n\n## Usage\n\n1. Invoke the [`start`] method when you would like to begin storing the browser's scroll position in history states, likely when your application mounts.\n2. Invoke the [`stop`] method when you would like to stop the restoration of scroll position, likely when your application unmounts.\n\nHave a look at [an example using React Router](./example).\n\n## API\n\n### start\n\n`scrollRestorer.start([options])`\n\nStarts tracking the user's scroll position.\n\n#### options\n\n##### autoRestore\n\nType: `boolean`.\nDefault: `true`.\n\nWhen `true`, `scroll-restorer` will attempt to restore the scroll position on each `popstate` event. Set this to `false` if you want to *manually* control the scroll position restoration (e.g. you may wish to call [`restoreScroll`] at a very specific point in your application's rendering lifecycle).\n\n##### captureScrollDebounce\n\nType: `number`.\nDefault: `50`.\n\nThe number of milliseconds by which the scroll-capturing function should be debounced.\n\n### end\n\n`scrollRestorer.end()`\n\nEnd scroll-restorer's behavior.\n\n### getSavedScroll\n\n`scrollRestorer.getSavedScroll([input])`\n\nReturns the scroll position retrieved from `window.history` or an optional `popstate` event.\nWhen the [`autoRestore`] option of [`start`] is `true`, this method will be invoked automatically, so you only want to use it manually if you've set [`autoRestore`] to `false`.\n\n#### input\n\nType: `{ state: Object }`, either `window.history` or a `popstate` event.\nDefault: `window.history`.\n\n### restoreScroll\n\n`scrollRestorer.restoreScroll([input, attempts])`\n\nManually restore the scroll position for a given history state or `popstate` event.\n\nWhen the [`autoRestore`] option of [`start`] is `true`, this method will be invoked automatically, so you only want to use it manually if you've set [`autoRestore`] to `false`.\n\n#### input\n\nType: `{ state: Object }`, either `window.history` or a `popstate` event.\nDefault: `window.history`.\n\n#### attempts\n\nType: `number`.\nDefault: `5`.\n\nThe number of times to attempt adjusting the scroll position.\nscroll-restorer might need to make multiple attempts if the saved scroll state refers to a position that is not yet available because content is still loading.\n\n## React & React Router Example\n\n```jsx\nimport React, {Component} from 'react';\nimport {HashRouter, Link, Route} from 'react-router-dom';\nimport scrollRestorer from '@mapbox/scroll-restorer';\n\nclass ScrollRestorerExample extends Component {\n componentDidMount() {\n // Initiate the scroll position restoration behavior.\n scrollRestorer.start();\n }\n\n componentWillUnmount() {\n // Cease the scroll position restoration behavior.\n scrollRestorer.stop();\n }\n\n getContent(numParagraphs) {\n const paragraphArr = new Array(numParagraphs).fill();\n\n return (\n
\n
Here are {numParagraphs} paragraph elements, enjoy!