├── .eslintignore ├── .eslintrc ├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── example ├── .eslintrc ├── components │ ├── DummyContent.js │ └── ScrollRestorerExample.js ├── index.html ├── index.js └── webpack.config.js ├── index.js ├── package-lock.json ├── package.json ├── test ├── get_window.test.js └── index.test.js └── util └── get_window.js /.eslintignore: -------------------------------------------------------------------------------- 1 | .gitignore -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "jest": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | coverage 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 1.1.0 4 | 5 | - Update dependencies and webpack config. 6 | 7 | ## 1.0.0 8 | 9 | - Start this log. 10 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality. 6 | 7 | Examples of unacceptable behavior by participants include: 8 | 9 | * The use of sexualized language or imagery 10 | * Personal attacks 11 | * Trolling or insulting/derogatory comments 12 | * Public or private harassment 13 | * Publishing other's private information, such as physical or electronic addresses, without explicit permission 14 | * Other unethical or unprofessional conduct 15 | 16 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team. 17 | 18 | This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. 19 | 20 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. 21 | 22 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/) 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Mapbox 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @mapbox/scroll-restorer 2 | 3 | Preserve 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. 4 | 5 | ## Installation 6 | 7 | ``` 8 | npm install @mapbox/scroll-restorer 9 | ``` 10 | 11 | ## Usage 12 | 13 | 1. Invoke the [`start`] method when you would like to begin storing the browser's scroll position in history states, likely when your application mounts. 14 | 2. Invoke the [`stop`] method when you would like to stop the restoration of scroll position, likely when your application unmounts. 15 | 16 | Have a look at [an example using React Router](./example). 17 | 18 | ## API 19 | 20 | ### start 21 | 22 | `scrollRestorer.start([options])` 23 | 24 | Starts tracking the user's scroll position. 25 | 26 | #### options 27 | 28 | ##### autoRestore 29 | 30 | Type: `boolean`. 31 | Default: `true`. 32 | 33 | When `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). 34 | 35 | ##### captureScrollDebounce 36 | 37 | Type: `number`. 38 | Default: `50`. 39 | 40 | The number of milliseconds by which the scroll-capturing function should be debounced. 41 | 42 | ### end 43 | 44 | `scrollRestorer.end()` 45 | 46 | End scroll-restorer's behavior. 47 | 48 | ### getSavedScroll 49 | 50 | `scrollRestorer.getSavedScroll([input])` 51 | 52 | Returns the scroll position retrieved from `window.history` or an optional `popstate` event. 53 | When 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`. 54 | 55 | #### input 56 | 57 | Type: `{ state: Object }`, either `window.history` or a `popstate` event. 58 | Default: `window.history`. 59 | 60 | ### restoreScroll 61 | 62 | `scrollRestorer.restoreScroll([input, attempts])` 63 | 64 | Manually restore the scroll position for a given history state or `popstate` event. 65 | 66 | When 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`. 67 | 68 | #### input 69 | 70 | Type: `{ state: Object }`, either `window.history` or a `popstate` event. 71 | Default: `window.history`. 72 | 73 | #### attempts 74 | 75 | Type: `number`. 76 | Default: `5`. 77 | 78 | The number of times to attempt adjusting the scroll position. 79 | scroll-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. 80 | 81 | ## React & React Router Example 82 | 83 | ```jsx 84 | import React, {Component} from 'react'; 85 | import {HashRouter, Link, Route} from 'react-router-dom'; 86 | import scrollRestorer from '@mapbox/scroll-restorer'; 87 | 88 | class ScrollRestorerExample extends Component { 89 | componentDidMount() { 90 | // Initiate the scroll position restoration behavior. 91 | scrollRestorer.start(); 92 | } 93 | 94 | componentWillUnmount() { 95 | // Cease the scroll position restoration behavior. 96 | scrollRestorer.stop(); 97 | } 98 | 99 | getContent(numParagraphs) { 100 | const paragraphArr = new Array(numParagraphs).fill(); 101 | 102 | return ( 103 |
104 |

Here are {numParagraphs} paragraph elements, enjoy!

105 | {paragraphArr.map((_, index) =>

Paragraph #{index}.

)} 106 |
107 | ); 108 | } 109 | 110 | render() { 111 | return ( 112 | 113 |
114 | 120 |
121 |

This is the home page.

} /> 122 | this.getContent(5)} /> 123 | this.getContent(20)} /> 124 | this.getContent(100)} /> 125 |
126 |
127 | 128 | ); 129 | } 130 | } 131 | 132 | export default ScrollRestorerExample; 133 | ``` 134 | 135 | ## Influences 136 | 137 | - [delayed-scroll-restoration-polyfill](https://github.com/brigade/delayed-scroll-restoration-polyfill) 138 | - [scroll-behavior](https://github.com/taion/scroll-behavior) 139 | 140 | [`start`]: #start 141 | [`stop`]: #stop 142 | [`restoreScroll`]: #restorescroll 143 | [`autoRestore`]: #autorestore 144 | -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "plugin:react/recommended", 3 | "parser": "babel-eslint", 4 | "parserOptions": { 5 | "ecmaFeatures": { 6 | "jsx": true, 7 | "modules": true 8 | } 9 | }, 10 | "plugins": [ 11 | "react" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /example/components/DummyContent.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React, { Component } from 'react'; 3 | 4 | class ExampleContainer extends Component { 5 | componentDidUpdate(prevProps) { 6 | // Scroll to top whenever the route changes. 7 | if (this.props.location !== prevProps.location) { 8 | window.scrollTo(0, 0); 9 | } 10 | } 11 | 12 | render() { 13 | return dummyContent[this.props.match.params.exampleID]; 14 | } 15 | } 16 | 17 | ExampleContainer.propTypes = { 18 | location: PropTypes.object, 19 | match: PropTypes.object 20 | }; 21 | 22 | const dummyContent = { 23 | 1: ( 24 |
25 |

Quis istud possit, inquit, negare?

26 |

27 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est enim tanti 28 | philosophi tamque nobilis audacter sua decreta defendere. Quos nisi 29 | redarguimus, omnis virtus, omne decus, omnis vera laus deserenda est. 30 | Duo Reges: constructio interrete. Cur igitur, cum de re conveniat, non 31 | malumus usitate loqui? Verba tu fingas et ea dicas, quae non sentias? 32 | Quid ait Aristoteles reliquique Platonis alumni?{' '} 33 |

34 |
35 | ), 36 | 2: ( 37 |
38 |

39 | Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur 40 | esse inanitas ista verborum. 41 |

42 |

43 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad haec, 44 | nisi molestum est, habeo quae velim. Ostendit pedes et pectus. Et nunc 45 | quidem quod eam tuetur, ut de vite potissimum loquar, est id 46 | extrinsecus; Serpere anguiculos, nare anaticulas, evolare merulas, 47 | cornibus uti videmus boves, nepas aculeis. Duo Reges: constructio 48 | interrete. Ostendit pedes et pectus.{' '} 49 |

50 |
51 | Quos ille, di inmortales, cum omnes artus ardere viderentur, cruciatus 52 | perferebat! nec tamen miser esse, quia summum id malum non erat, tantum 53 | modo laboriosus videbatur; 54 |
55 |

56 | Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare. 57 |

58 |

59 | Itaque hic ipse iam pridem est reiectus; Quod autem ratione actum est, 60 | id officium appellamus. Familiares nostros, credo, Sironem dicis et 61 | Philodemum, cum optimos viros, tum homines doctissimos. Et ille ridens: 62 | Video, inquit, quid agas; Suo genere perveniant ad extremum;{' '} 63 | Expressa vero in iis aetatibus, quae iam confirmatae sunt. Ut alios 64 | omittam, hunc appello, quem ille unum secutus est. Sed quae tandem ista 65 | ratio est? Cur post Tarentum ad Archytam? Itaque ab his ordiamur.{' '} 66 | Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum.{' '} 67 |

68 |
69 | ), 70 | 3: ( 71 |
72 |

73 | Incommoda autem et commoda-ita enim estmata et dustmata appello-communia 74 | esse voluerunt, paria noluerunt. 75 |

76 |

77 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ratio quidem 78 | vestra sic cogit. Sed haec omittamus; E quo efficitur, non ut nos 79 | non intellegamus quae vis sit istius verbi, sed ut ille suo more 80 | loquatur, nostrum neglegat. Cognitio autem haec est una nostri, ut vim 81 | corporis animique norimus sequamurque eam vitam, quae rebus iis ipsis 82 | perfruatur. Quodsi vultum tibi, si incessum fingeres, quo gravior 83 | viderere, non esses tui similis; Duo Reges: constructio interrete. 84 | Quantam rem agas, ut Circeis qui habitet totum hunc mundum suum 85 | municipium esse existimet? Hic ego: Etsi facit hic quidem, inquam, Piso, 86 | ut vides, ea, quae praecipis, tamen mihi grata hortatio tua est.{' '} 87 |

88 |

89 | Summum a vobis bonum voluptas dicitur. An dubium est, quin virtus 90 | ita maximam partem optineat in rebus humanis, ut reliquas obruat? 91 | Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine 92 | nostros. Sed ad illum redeo. Aliam vero vim voluptatis esse, aliam nihil 93 | dolendi, nisi valde pertinax fueris, concedas necesse est. Inquit, 94 | respondet: Quia, nisi quod honestum est, nullum est aliud bonum! Non 95 | quaero iam verumne sit;{' '} 96 |

97 |

98 | Quis est tam dissimile homini. Quid est, quod ab ea absolvi et 99 | perfici debeat? Quantum Aristoxeni ingenium consumptum videmus in 100 | musicis? Quodcumque in mentem incideret, et quodcumque tamquam 101 | occurreret. Primum cur ista res digna odio est, nisi quod est turpis? 102 | Itaque primos congressus copulationesque et consuetudinum instituendarum 103 | voluntates fieri propter voluptatem; Sunt autem, qui dicant foedus esse 104 | quoddam sapientium, ut ne minus amicos quam se ipsos diligant. Sin 105 | tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Nam 106 | Metrodorum non puto ipsum professum, sed, cum appellaretur ab Epicuro, 107 | repudiare tantum beneficium noluisse; Tu autem inter haec tantam 108 | multitudinem hominum interiectam non vides nec laetantium nec dolentium? 109 | Quibus autem in rebus tanta obscuratio non fit, fieri tamen potest, ut 110 | id ipsum, quod interest, non sit magnum. Quae cum ita sint, effectum est 111 | nihil esse malum, quod turpe non sit. Cur post Tarentum ad Archytam? 112 | Ergo et avarus erit, sed finite, et adulter, verum habebit modum, et 113 | luxuriosus eodem modo.{' '} 114 |

115 |
    116 |
  1. 117 | Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et 118 | quidem corpore perceptarum. 119 |
    2. 120 |
  2. 121 | Quando enim Socrates, qui parens philosophiae iure dici potest, 122 | quicquam tale fecit? 123 |
    3. 124 |
  3. 125 | Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt 126 | opiniones ac iudicia levitatis. 127 |
    4. 128 |
  4. 129 | Quae tamen a te agetur non melior, quam illae sunt, quas interdum 130 | optines. 131 |
    5. 132 |
133 |
134 | Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, 135 | coniungi debuerunt; 136 |
137 |
138 |
139 | Respondeat totidem verbis. 140 |
141 |
142 | In his igitur partibus duabus nihil erat, quod Zeno commutare 143 | gestiret. 144 |
145 |
146 | Immo videri fortasse. 147 |
148 |
149 | Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid 150 | fugere debeant? 151 |
152 |
153 | Proclivi currit oratio. 154 |
155 |
Hoc non est positum in nostra actione.
156 |
157 | Age sane, inquam. 158 |
159 |
160 | Qualis ista philosophia est, quae non interitum afferat pravitatis, 161 | sed sit contenta mediocritate vitiorum? 162 |
163 |
164 |
165 | ), 166 | 4: ( 167 |
168 |

Mihi, inquam, qui te id ipsum rogavi?

169 |

170 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quorum altera 171 | prosunt, nocent altera. Quid dubitas igitur mutare principia naturae? Et 172 | nemo nimium beatus est; Itaque his sapiens semper vacabit. Nam ista 173 | vestra: Si gravis, brevis; Duo Reges: constructio interrete.{' '} 174 |

175 |
    176 |
  1. 177 | Neque enim civitas in seditione beata esse potest nec in discordia 178 | dominorum domus; 179 |
    2. 180 |
  2. 181 | Incommoda autem et commoda-ita enim estmata et dustmata 182 | appello-communia esse voluerunt, paria noluerunt. 183 |
    3. 184 |
  3. Oratio me istius philosophi non offendit;
    4. 185 |
  4. Solum praeterea formosum, solum liberum, solum civem, stultost;
    5. 186 |
  5. 187 | Ab his oratores, ab his imperatores ac rerum publicarum principes 188 | extiterunt. 189 |
    6. 190 |
  6. 191 | Videmusne ut pueri ne verberibus quidem a contemplandis rebus 192 | perquirendisque deterreantur? 193 |
    7. 194 |
195 |

196 | Sequitur disserendi ratio cognitioque naturae; Minime vero 197 | istorum quidem, inquit. Quid, de quo nulla dissensio est? Quae 198 | cum essent dicta, discessimus. Quae sequuntur igitur?{' '} 199 |

200 |
201 | ), 202 | 5: ( 203 |
204 |

Fortasse id optimum, sed ubi illud: Plus semper voluptatis?

205 |

206 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim 207 | censent, oportunitatis esse beate vivere. Apparet statim, quae sint 208 | officia, quae actiones. Quae cum ita sint, effectum est nihil esse 209 | malum, quod turpe non sit. Omnia contraria, quos etiam insanos esse 210 | vultis. Duo Reges: constructio interrete.{' '} 211 |

212 |
213 |
214 | Quare conare, quaeso. 215 |
216 |
217 | Cuius ad naturam apta ratio vera illa et summa lex a philosophis 218 | dicitur. 219 |
220 |
221 | Quae sequuntur igitur? 222 |
223 |
224 | Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse 225 | oportebit; 226 |
227 |
228 |
    229 |
  1. 230 | Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. 231 |
    2. 232 |
  2. 233 | Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae 234 | accepimus. 235 |
    3. 236 |
237 |
    238 |
  1. Quo plebiscito decreta a senatu est consuli quaestio Cn.
    2. 239 |
  2. 240 | Idque testamento cavebit is, qui nobis quasi oraculum ediderit nihil 241 | post mortem ad nos pertinere? 242 |
    3. 243 |
  3. 244 | Cum salvum esse flentes sui respondissent, rogavit essentne fusi 245 | hostes. 246 |
    4. 247 |
  4. 248 | Sed quid minus probandum quam esse aliquem beatum nec satis beatum? 249 |
    5. 250 |
251 |

252 | Id est enim, de quo quaerimus. Si sapiens, ne tum quidem miser, 253 | cum ab Oroete, praetore Darei, in crucem actus est. Vitae autem degendae 254 | ratio maxime quidem illis placuit quieta. Haec et tu ita posuisti, et 255 | verba vestra sunt. Semovenda est igitur voluptas, non solum ut recta 256 | sequamini, sed etiam ut loqui deceat frugaliter. Commentarios quosdam, 257 | inquam, Aristotelios, quos hic sciebam esse, veni ut auferrem, quos 258 | legerem, dum essem otiosus; Non ego tecum iam ita iocabor, ut isdem his 259 | de rebus, cum L. Zenonis est, inquam, hoc Stoici. Quod cum 260 | accidisset ut alter alterum necopinato videremus, surrexit statim. Atque 261 | haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia.{' '} 262 |

263 |
264 |
265 | At certe gravius. 266 |
267 |
Conferam tecum, quam cuique verso rem subicias;
268 |
269 | Recte dicis; 270 |
271 |
Nos vero, inquit ille;
272 |
273 | Recte, inquit, intellegis. 274 |
275 |
276 | Quos quidem tibi studiose et diligenter tractandos magnopere censeo. 277 |
278 |
279 | Poterat autem inpune; 280 |
281 |
Torquatus, is qui consul cum Cn.
282 |
283 |

284 | Expectoque quid ad id, quod quaerebam, respondeas. Quae etsi mihi nullo 285 | modo probantur, tamen Democritum laudatum a ceteris ab hoc, qui eum unum 286 | secutus esset, nollem vituperatum.{' '} 287 | Dat enim intervalla et relaxat. Quodsi, ne quo incommodo 288 | afficiare, non relinques amicum, tamen, ne sine fructu alligatus sis, ut 289 | moriatur optabis. Ergo in gubernando nihil, in officio plurimum 290 | interest, quo in genere peccetur. Piso, familiaris noster, et alia multa 291 | et hoc loco Stoicos irridebat: Quid enim? Nec enim, omnes avaritias si 292 | aeque avaritias esse dixerimus, sequetur ut etiam aequas esse dicamus. 293 | Hanc ergo intuens debet institutum illud quasi signum absolvere. Habes, 294 | inquam, Cato, formam eorum, de quibus loquor, philosophorum.{' '} 295 | Hunc vos beatum;{' '} 296 |

297 |
Sic enim censent, oportunitatis esse beate vivere.
298 |

299 | Iis igitur est difficilius satis facere, qui se Latina scripta dicunt 300 | contemnere. Is ita vivebat, ut nulla tam exquisita posset inveniri 301 | voluptas, qua non abundaret. Themistocles quidem, cum ei Simonides an 302 | quis alius artem memoriae polliceretur, Oblivionis, inquit, mallem. Sed 303 | est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est 304 | naturae, disserendi altera, vivendi tertia. Aliena dixit in physicis nec 305 | ea ipsa, quae tibi probarentur; Non enim ipsa genuit hominem, sed 306 | accepit a natura inchoatum. Vide ne ista sint Manliana vestra aut maiora 307 | etiam, si imperes quod facere non possim.{' '} 308 |

309 |

310 | Perfecto enim et concluso neque virtutibus neque amicitiis usquam locum 311 | esse, si ad voluptatem omnia referantur, nihil praeterea est magnopere 312 | dicendum. Et ais, si una littera commota sit, fore tota ut labet 313 | disciplina. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium 314 | consuetudo Latina traduceret. Non elogia monimentorum id significant, 315 | velut hoc ad portam: Hunc unum plurimae consentiunt gentes populi 316 | primarium fuisse virum. Graccho, eius fere, aequalí?{' '} 317 | Comprehensum, quod cognitum non habet? Ille vero, si 318 | insipiens-quo certe, quoniam tyrannus -, numquam beatus;{' '} 319 |

320 |

321 | Sin laboramus, quis est, qui alienae modum statuat industriae? Nemo enim 322 | est, qui aliter dixerit quin omnium naturarum simile esset id, ad quod 323 | omnia referrentur, quod est ultimum rerum appetendarum. Tuo vero id 324 | quidem, inquam, arbitratu. Nam illud quidem adduci vix possum, ut ea, 325 | quae senserit ille, tibi non vera videantur. Quod mihi quidem visus est, 326 | cum sciret, velle tamen confitentem audire Torquatum. Sin te auctoritas 327 | commovebat, nobisne omnibus et Platoni ipsi nescio quem illum 328 | anteponebas? Hoc enim identidem dicitis, non intellegere nos quam 329 | dicatis voluptatem. Sin aliud quid voles, postea. Quorum sine 330 | causa fieri nihil putandum est. Hoc etsi multimodis reprehendi potest, 331 | tamen accipio, quod dant. Vos autem cum perspicuis dubia debeatis 332 | illustrare, dubiis perspicua conamini tollere. Quod dicit Epicurus etiam 333 | de voluptate, quae minime sint voluptates, eas obscurari saepe et obrui. 334 | Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis 335 | voluptatibus?{' '} 336 |

337 |

Quamquam haec quidem praeposita recte et reiecta dicere licebit.

338 |

339 | Quaesita enim virtus est, non quae relinqueret naturam, sed quae 340 | tueretur. Non prorsus, inquit, omnisque, qui sine dolore sint, in 341 | voluptate, et ea quidem summa, esse dico. Sine ea igitur iucunde negat 342 | posse se vivere? Aut haec tibi, Torquate, sunt vituperanda aut 343 | patrocinium voluptatis repudiandum. Vide, ne etiam menses! nisi forte 344 | eum dicis, qui, simul atque arripuit, interficit. Sed dum efficere 345 | vultis beatum sapientem, cum maximas animo voluptates percipiat 346 | omnibusque partibus maiores quam corpore, quid occurrat non videtis. 347 | Animadverti, ínquam, te isto modo paulo ante ponere, et scio ab Antiocho 348 | nostro dici sic solere; Etiam inchoatum, ut, si iuste depositum reddere 349 | in recte factis sit, in officiis ponatur depositum reddere; Mihi quidem 350 | Homerus huius modi quiddam vidisse videatur in iis, quae de Sirenum 351 | cantibus finxerit. Sed residamus, inquit, si placet. Quid enim 352 | est a Chrysippo praetermissum in Stoicis? Nullis enim partitionibus, 353 | nullis definitionibus utuntur ipsique dicunt ea se modo probare, quibus 354 | natura tacita adsentiatur.{' '} 355 |

356 |

357 | Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; 358 | Apud ceteros autem philosophos, qui quaesivit aliquid, tacet;{' '} 359 | Invidiosum nomen est, infame, suspectum.{' '} 360 | Cave putes quicquam esse verius. Audeo dicere, inquit.{' '} 361 | Eadem nunc mea adversum te oratio est. Callipho ad virtutem nihil 362 | adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Si ista mala 363 | sunt, in quae potest incidere sapiens, sapientem esse non esse ad beate 364 | vivendum satis. Quae cum essent dicta, discessimus.{' '} 365 | Quid enim possumus hoc agere divinius?{' '} 366 |

367 |
    368 |
  1. 369 | Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? 370 |
    2. 371 |
  2. 372 | Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo 373 | nos abducat? 374 |
    3. 375 |
  3. 376 | An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? 377 |
    4. 378 |
  4. Et ille ridens: Video, inquit, quid agas;
    5. 379 |
380 |
381 | Voluptatis causa, etiam si eam non consequare, aut non dolendi, etiam si 382 | id assequi nequeas, aut eorum, quae secundum naturam sunt, adipiscendi, 383 | etiam si nihil consequare. 384 |
385 | 403 |

404 | Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos 405 | quoque concedimus; Mihi quidem Homerus huius modi quiddam vidisse 406 | videatur in iis, quae de Sirenum cantibus finxerit. Est autem situm in 407 | nobis ut et adversa quasi perpetua oblivione obruamus et secunda iucunde 408 | ac suaviter meminerimus. Possumusne hic scire qualis sit, nisi 409 | contulerimus inter nos, cum finem bonorum dixerimus, quid finis, quid 410 | etiam sit ipsum bonum? Hoc unum Aristo tenuit: praeter vitia atque 411 | virtutes negavit rem esse ullam aut fugiendam aut expetendam. Quae quo 412 | sunt excelsiores, eo dant clariora indicia naturae.{' '} 413 |

414 |
415 | Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent 416 | in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret. 417 |
418 |
419 |
420 | Sed nimis multa. 421 |
422 |
423 | Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam 424 | Zenoni desciscendi fuisse. 425 |
426 |
427 | Nos commodius agimus. 428 |
429 |
430 | Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus 431 | gratiam. 432 |
433 |
434 | An potest cupiditas finiri? 435 |
436 |
Easdemne res?
437 |
438 |

439 | Quid, quod res alia tota est? Sit hoc ultimum bonorum, quod nunc a me 440 | defenditur; Princeps huius civitatis Phalereus Demetrius cum patria 441 | pulsus esset iniuria, ad Ptolomaeum se regem Alexandream contulit. Et 442 | quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; 443 | Nam, ut saepe iam dixi, in infirma aetate inbecillaque mente vis naturae 444 | quasi per caliginem cernitur; Non est igitur voluptas bonum. Nam 445 | cui proposito sit conservatio sui, necesse est huic partes quoque sui 446 | caras suo genere laudabiles. Nec vero intermittunt aut admirationem 447 | earum rerum, quae sunt ab antiquis repertae, aut investigationem 448 | novarum. Idem adhuc; Satisne ergo pudori consulat, si quis sine 449 | teste libidini pareat?{' '} 450 |

451 |

Sine ea igitur iucunde negat posse se vivere?

452 |

453 | Hunc vos beatum; Videmus igitur ut conquiescere ne infantes 454 | quidem possint. Sedulo, inquam, faciam. Animadverti, ínquam, te 455 | isto modo paulo ante ponere, et scio ab Antiocho nostro dici sic solere; 456 | Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Ac 457 | ne plura complectar-sunt enim innumerabilia-, bene laudata virtus 458 | voluptatis aditus intercludat necesse est. Eorum enim omnium multa 459 | praetermittentium, dum eligant aliquid, quod sequantur, quasi curta 460 | sententia; Egone non intellego, quid sit don Graece, Latine voluptas? 461 | Sic enim maiores nostri labores non fugiendos tristissimo tamen verbo 462 | aerumnas etiam in deo nominaverunt. Sin autem ad animum, falsum est, 463 | quod negas animi ullum esse gaudium, quod non referatur ad corpus. Quae 464 | sequuntur igitur? Sed vobis voluptatum perceptarum recordatio vitam 465 | beatam facit, et quidem corpore perceptarum. Ratio ista, quam defendis, 466 | praecepta, quae didicisti, quae probas, funditus evertunt amicitiam, 467 | quamvis eam Epicurus, ut facit, in caelum efferat laudibus. De maximma 468 | autem re eodem modo, divina mente atque natura mundum universum et eius 469 | maxima partis administrari.{' '} 470 |

471 |

Cyrenaici quidem non recusant;

472 |

473 | Totum autem id externum est, et quod externum, id in casu est.{' '} 474 | Quibusnam praeteritis? Et nemo nimium beatus est; Quid enim 475 | possumus hoc agere divinius? At enim iam dicitis virtutem non posse 476 | constitui, si ea, quae extra virtutem sint, ad beate vivendum 477 | pertineant. Serpere anguiculos, nare anaticulas, evolare merulas, 478 | cornibus uti videmus boves, nepas aculeis. Quid enim ab antiquis ex eo 479 | genere, quod ad disserendum valet, praetermissum est? Non quaeritur 480 | autem quid naturae tuae consentaneum sit, sed quid disciplinae. Quod cum 481 | accidisset ut alter alterum necopinato videremus, surrexit statim.{' '} 482 |

483 |

484 | Non laboro, inquit, de nomine. Fortemne possumus dicere eundem illum 485 | Torquatum? Illud non continuo, ut aeque incontentae. Res enim 486 | fortasse verae, certe graves, non ita tractantur, ut debent, sed 487 | aliquanto minutius. Nec vero audiendus Hieronymus, cui summum bonum est 488 | idem, quod vos interdum vel potius nimium saepe dicitis, nihil dolere. 489 | Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. 490 | Qui autem diffidet perpetuitati bonorum suorum, timeat necesse est, ne 491 | aliquando amissis illis sit miser. Quin etiam ferae, inquit Pacuvius, 492 | quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore 493 | mortis horrescunt. Ut scias me intellegere, primum idem esse dico 494 | voluptatem, quod ille don. Ita fit illa conclusio non solum vera, sed 495 | ita perspicua, ut dialectici ne rationem quidem reddi putent oportere: 496 | si illud, hoc; Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi 497 | valde pertinax fueris, concedas necesse est. Mihi, inquam, qui te id 498 | ipsum rogavi? Quae enim cupiditates a natura proficiscuntur, facile 499 | explentur sine ulla iniuria, quae autem inanes sunt, iis parendum non 500 | est.{' '} 501 |

502 |

503 | Contineo me ab exemplis. Quis enim redargueret? Non 504 | autem hoc: igitur ne illud quidem. Quo minus animus a se ipse dissidens 505 | secumque discordans gustare partem ullam liquidae voluptatis et liberae 506 | potest. Quorum altera prosunt, nocent altera. Diodorus, eius 507 | auditor, adiungit ad honestatem vacuitatem doloris. In primo enim ortu 508 | inest teneritas ac mollitia quaedam, ut nec res videre optimas nec agere 509 | possint. Desideraret enim valitudinem, vacuitatem doloris, appeteret 510 | etiam conservationem sui earumque rerum custodiam finemque, sibi 511 | constitueret secundum naturam vivere. Quo plebiscito decreta a senatu 512 | est consuli quaestio Cn.{' '} 513 |

514 |

515 | Illa tamen simplicia, vestra versuta. Virtutis, magnitudinis animi, 516 | patientiae, fortitudinis fomentis dolor mitigari solet. Animi enim 517 | quoque dolores percipiet omnibus partibus maiores quam corporis.{' '} 518 | Qui est in parvis malis. Quamquam te quidem video minime esse 519 | deterritum. Sed haec ab Antiocho, familiari nostro, dicuntur multo 520 | melius et fortius, quam a Stasea dicebantur. Neque enim disputari sine 521 | reprehensione nec cum iracundia aut pertinacia recte disputari potest. 522 | Aut etiam, ut vestitum, sic sententiam habeas aliam domesticam, aliam 523 | forensem, ut in fronte ostentatio sit, intus veritas occultetur? Non 524 | enim in selectione virtus ponenda erat, ut id ipsum, quod erat bonorum 525 | ultimum, aliud aliquid adquireret. Quis Aristidem non mortuum diligit?{' '} 526 |

527 | 536 |
537 | Totum genus hoc Zeno et qui ab eo sunt aut non potuerunt aut noluerunt, 538 | certe reliquerunt. 539 |
540 | 544 |
545 | ) 546 | }; 547 | 548 | export default ExampleContainer; 549 | -------------------------------------------------------------------------------- /example/components/ScrollRestorerExample.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | HashRouter as Router, 4 | NavLink, 5 | Redirect, 6 | Route 7 | } from 'react-router-dom'; 8 | 9 | import DummyContent from './DummyContent'; 10 | import scrollRestorer from '../../index'; 11 | 12 | class ScrollRestorerExample extends Component { 13 | componentDidMount() { 14 | scrollRestorer.start({ autoRestore: true }); 15 | } 16 | 17 | componentWillUnmount() { 18 | scrollRestorer.stop(); 19 | } 20 | 21 | render() { 22 | return ( 23 | 24 |
25 | 74 |
75 | { 79 | return ; 80 | }} 81 | /> 82 | { 86 | return ; 87 | }} 88 | /> 89 | 90 |
91 |
92 | 93 | ); 94 | } 95 | } 96 | 97 | export default ScrollRestorerExample; 98 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Scroll Restorer Example 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import ScrollRestorerExample from './components/ScrollRestorerExample'; 5 | 6 | ReactDOM.render(, document.getElementById('app')); 7 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: { 5 | app: ['./example/index.js'] 6 | }, 7 | devServer: { 8 | static: { 9 | directory: './example', 10 | }, 11 | }, 12 | mode: 'development', 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.jsx?$/, 17 | loader: 'babel-loader', 18 | options: { 19 | presets: [ 20 | [ 21 | "@babel/preset-env", 22 | { 23 | "useBuiltIns": "entry", 24 | "corejs": "3.22" 25 | } 26 | ], 27 | ["@babel/preset-react"] 28 | ], 29 | plugins: [ 30 | ["@babel/plugin-proposal-function-bind"] 31 | ] 32 | } 33 | } 34 | ] 35 | }, 36 | output: { 37 | path: path.resolve(__dirname, 'build'), 38 | publicPath: '/assets/', 39 | filename: 'bundle.js' 40 | }, 41 | target: 'web' 42 | }; 43 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var debounce = require('debounce'); 4 | var xtend = require('xtend'); 5 | var getWindow = require('./util/get_window').getWindow; 6 | 7 | var removeListenerFunctions; 8 | 9 | function end() { 10 | for (var i = 0, l = removeListenerFunctions.length; i < l; i++) { 11 | removeListenerFunctions[i](); 12 | } 13 | } 14 | 15 | function getSavedScroll(input) { 16 | input = input || getWindow().history; 17 | if (!input || !input.state) return; 18 | return input.state.scroll; 19 | } 20 | 21 | function restoreScroll(input, attemptsRemaining) { 22 | attemptsRemaining = attemptsRemaining == null ? 5 : attemptsRemaining; 23 | var savedScroll = getSavedScroll(input); 24 | if (!savedScroll) return; 25 | getWindow().requestAnimationFrame(function() { 26 | var savedX = savedScroll.x; 27 | var savedY = savedScroll.y; 28 | if (attemptsRemaining === 0) return; 29 | var pageXOffset = getWindow().pageXOffset; 30 | var pageYOffset = getWindow().pageYOffset; 31 | if ( 32 | savedY < getWindow().document.body.scrollHeight && 33 | (savedX !== pageXOffset || savedY !== pageYOffset) 34 | ) { 35 | getWindow().scrollTo(savedX, savedY); 36 | } else { 37 | restoreScroll(input, attemptsRemaining - 1); 38 | } 39 | }); 40 | } 41 | 42 | function start(options) { 43 | options = xtend( 44 | { 45 | autoRestore: true, 46 | captureScrollDebounce: 50 47 | }, 48 | options || {} 49 | ); 50 | 51 | var captureScroll = debounce(function() { 52 | getWindow().requestAnimationFrame(function() { 53 | var x = getWindow().pageXOffset; 54 | var y = getWindow().pageYOffset; 55 | var historyState = getWindow().history.state; 56 | var savedX = historyState && historyState.scroll && historyState.scroll.x; 57 | var savedY = historyState && historyState.scroll && historyState.scroll.y; 58 | if (savedX !== x || savedY !== y) { 59 | var nextHistoryState = xtend(historyState, { 60 | scroll: { x: x, y: y } 61 | }); 62 | getWindow().history.replaceState( 63 | nextHistoryState, 64 | null, 65 | getWindow().location 66 | ); 67 | } 68 | }); 69 | }, options.captureScrollDebounce); 70 | 71 | // cf. https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration 72 | if ('scrollRestoration' in getWindow().history) { 73 | getWindow().history.scrollRestoration = 'manual'; 74 | } 75 | 76 | // Scroll positions are saved into the history entry's state; then when that 77 | // the history changes (the popstate event), we try restoring any saved 78 | // scroll position. 79 | 80 | getWindow().addEventListener('scroll', captureScroll, { passive: true }); 81 | if (options.autoRestore) { 82 | getWindow().addEventListener('popstate', restoreScroll); 83 | } 84 | 85 | removeListenerFunctions = [ 86 | function() { 87 | getWindow().removeEventListener('scroll', captureScroll, { 88 | passive: true 89 | }); 90 | } 91 | ]; 92 | if (options.autoRestore) { 93 | removeListenerFunctions.push(function() { 94 | getWindow().removeEventListener('popstate', restoreScroll); 95 | }); 96 | } 97 | } 98 | 99 | module.exports = { 100 | start: start, 101 | end: end, 102 | restoreScroll: restoreScroll, 103 | getSavedScroll: getSavedScroll 104 | }; 105 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mapbox/scroll-restorer", 3 | "version": "1.1.0", 4 | "description": "Preserve scroll state while navigating client-side routes", 5 | "main": "index.js", 6 | "scripts": { 7 | "precommit": "lint-staged", 8 | "format": "prettier --single-quote --write '{,test/**/}*.js'", 9 | "lint": "eslint .", 10 | "start-example-app": "webpack-dev-server --config ./example/webpack.config.js", 11 | "test": "jest" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/mapbox/scroll-restorer.git" 16 | }, 17 | "keywords": [ 18 | "scroll-restoration", 19 | "scroll", 20 | "restore", 21 | "routing", 22 | "router" 23 | ], 24 | "author": "Mapbox", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/mapbox/scroll-restorer/issues" 28 | }, 29 | "homepage": "https://github.com/mapbox/scroll-restorer#readme", 30 | "devDependencies": { 31 | "@babel/core": "^7", 32 | "@babel/eslint-parser": "^7", 33 | "babel-loader": "^9", 34 | "@babel/preset-env": "^7", 35 | "@babel/preset-react": "^7", 36 | "@babel/plugin-proposal-function-bind": "^7", 37 | "eslint": "^8", 38 | "eslint-plugin-react": "^7.1.0", 39 | "husky": "^8", 40 | "jest": "^29", 41 | "jest-environment-jsdom": "^29.7.0", 42 | "lint-staged": "^15", 43 | "prettier": "^3", 44 | "prop-types": "^15", 45 | "react": "^16", 46 | "react-dom": "^16", 47 | "react-router-dom": "^4.1.1", 48 | "webpack": "^5", 49 | "webpack-cli": "^5.1.4", 50 | "webpack-dev-server": "^4" 51 | }, 52 | "jest": { 53 | "coverageReporters": [ 54 | "json", 55 | "lcov", 56 | "text", 57 | "html" 58 | ], 59 | "resetMocks": true, 60 | "roots": [ 61 | "./test" 62 | ], 63 | "testRegex": ".*\\.test\\.js$" 64 | }, 65 | "lint-staged": { 66 | "{,test/**/}*.js": [ 67 | "eslint", 68 | "prettier --single-quote --write", 69 | "git add" 70 | ] 71 | }, 72 | "dependencies": { 73 | "debounce": "^1.0.2", 74 | "xtend": "^4.0.1" 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /test/get_window.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | var getWindowModule = require('../util/get_window'); 6 | 7 | describe('get-window', function () { 8 | it('returns the window object', function () { 9 | expect(getWindowModule.getWindow()).toBe(window); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | jest.mock('../util/get_window'); 2 | 3 | var getWindowModule = require('../util/get_window'); 4 | var scrollRestorer = require('../index'); 5 | 6 | describe('scroll-restorer', function() { 7 | beforeEach(function() { 8 | // Mock the window object. 9 | jest.spyOn(getWindowModule, 'getWindow').mockReturnValue({ 10 | addEventListener: jest.fn(), 11 | document: { 12 | body: { 13 | scrollHeight: 100 14 | } 15 | }, 16 | history: { 17 | replaceState: jest.fn(), 18 | scrollRestoration: 'foo', 19 | state: { 20 | scroll: { 21 | x: 0, 22 | y: 0 23 | } 24 | } 25 | }, 26 | location: 'foo', 27 | pageXOffset: 0, 28 | pageYOffset: 0, 29 | removeEventListener: jest.fn(), 30 | replaceState: jest.fn(), 31 | // We just invoke requestAnimationFrame functions immediately. 32 | requestAnimationFrame: function(fn) { 33 | fn(); 34 | }, 35 | scrollTo: jest.fn() 36 | }); 37 | }); 38 | 39 | afterEach(function() { 40 | getWindowModule.getWindow.mockRestore(); 41 | }); 42 | 43 | describe('start', function() { 44 | it('adds a scroll event listener', function() { 45 | scrollRestorer.start(); 46 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 47 | .mock.calls[0]; 48 | expect(addEventListenerArgs[0]).toBe('scroll'); 49 | }); 50 | 51 | it('adds a scroll event listener with passive option enabled', function() { 52 | scrollRestorer.start(); 53 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 54 | .mock.calls[0]; 55 | expect(addEventListenerArgs[2]).toEqual({ passive: true }); 56 | }); 57 | 58 | it('adds a popstate event listener when autoRestore option is omitted', function() { 59 | scrollRestorer.start(); 60 | // We should have attached popstate and scroll event listeners. 61 | expect( 62 | getWindowModule.getWindow().addEventListener 63 | ).toHaveBeenCalledTimes(2); 64 | // Find the popstate addEventListener call. 65 | var popStateListenerCall = getWindowModule 66 | .getWindow() 67 | .addEventListener.mock.calls.filter(function(callArgs) { 68 | return callArgs[0] === 'popstate'; 69 | }); 70 | expect(popStateListenerCall.length).toBe(1); 71 | }); 72 | 73 | it('does not add a popstate event listener when autoRestore option is false', function() { 74 | scrollRestorer.start({ autoRestore: false }); 75 | // We should have attached only a scroll listener. 76 | expect( 77 | getWindowModule.getWindow().addEventListener 78 | ).toHaveBeenCalledTimes(1); 79 | // We should not have attached a popstate listener. 80 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 81 | .mock.calls[0]; 82 | expect(addEventListenerArgs[0]).not.toBe('popstate'); 83 | }); 84 | 85 | it('sets history.scrollRestoration to manual if property exists', function() { 86 | expect(getWindowModule.getWindow().history.scrollRestoration).toEqual( 87 | 'foo' 88 | ); 89 | scrollRestorer.start(); 90 | expect(getWindowModule.getWindow().history.scrollRestoration).toEqual( 91 | 'manual' 92 | ); 93 | }); 94 | 95 | it('does not set history.scrollRestoration if property does not exists', function() { 96 | delete getWindowModule.getWindow().history.scrollRestoration; 97 | 98 | scrollRestorer.start(); 99 | expect(getWindowModule.getWindow().history.scrollRestoration).toEqual( 100 | undefined 101 | ); 102 | }); 103 | }); 104 | 105 | describe('captureScroll', function() { 106 | beforeEach(function() { 107 | jest.useFakeTimers(); 108 | }); 109 | 110 | afterEach(function() { 111 | jest.useRealTimers(); 112 | }); 113 | 114 | it('calls #replaceState if the saved offset values have changed', function() { 115 | // We're pretending that the user scrolled the window by 20px on both axes. 116 | getWindowModule.getWindow().pageXOffset = 20; 117 | getWindowModule.getWindow().pageYOffset = 20; 118 | 119 | scrollRestorer.start(); 120 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 121 | .mock.calls[0]; 122 | // Let's verify that this is the scroll event listener. 123 | expect(addEventListenerArgs[0]).toEqual('scroll'); 124 | // Let's invoke the debounced event handler directly. 125 | addEventListenerArgs[1](); 126 | // We fake the passage of time to invoke our debounced function. 127 | jest.runAllTimers(); 128 | // Assert that replaceState was invoked with the "new" scroll offset values. 129 | expect( 130 | getWindowModule.getWindow().history.replaceState 131 | ).toHaveBeenCalledWith( 132 | { scroll: { x: 20, y: 20 } }, 133 | null, 134 | getWindowModule.getWindow().location 135 | ); 136 | }); 137 | 138 | it('does not call #replaceState if the saved offset values have not changed', function() { 139 | scrollRestorer.start(); 140 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 141 | .mock.calls[0]; 142 | // Let's verify that this is the scroll event listener. 143 | expect(addEventListenerArgs[0]).toEqual('scroll'); 144 | // Let's invoke the debounced event handler directly. 145 | addEventListenerArgs[1](); 146 | // We fake the passage of time to invoke our debounced function. 147 | jest.runAllTimers(); 148 | expect( 149 | getWindowModule.getWindow().history.replaceState 150 | ).not.toHaveBeenCalled(); 151 | }); 152 | }); 153 | 154 | describe('getSavedScroll', function() { 155 | it('returns value from provided input', function() { 156 | expect(scrollRestorer.getSavedScroll({ state: { scroll: 'foo' } })).toBe( 157 | 'foo' 158 | ); 159 | }); 160 | 161 | it('returns value from window.history when input is not defined', function() { 162 | expect(scrollRestorer.getSavedScroll()).toEqual({ x: 0, y: 0 }); 163 | }); 164 | 165 | it('returns undefined when input.state is undefined', function() { 166 | expect(scrollRestorer.getSavedScroll({ foo: 'bar' })).toEqual(undefined); 167 | }); 168 | }); 169 | 170 | describe('restoreScroll', function() { 171 | it('calls #scrollTo with a position retrieved from state in window.history', function() { 172 | // We're pretending that a scroll position has been saved previously. 173 | getWindowModule.getWindow().history.state.scroll = { x: 0, y: 20 }; 174 | scrollRestorer.restoreScroll(); 175 | 176 | expect(getWindowModule.getWindow().scrollTo).toHaveBeenCalledWith(0, 20); 177 | }); 178 | 179 | it('calls #scrollTo with a position retrieved from a popstate event', function() { 180 | var popstateEvent = { state: { scroll: { x: 0, y: 40 } } }; 181 | scrollRestorer.restoreScroll(popstateEvent); 182 | 183 | expect(getWindowModule.getWindow().scrollTo).toHaveBeenCalledWith(0, 40); 184 | }); 185 | 186 | it('does not call #scrollTo when unnecessary', function() { 187 | // We're pretending that the user scrolled the window by 20px on the y axis. 188 | getWindowModule.getWindow().pageXOffset = 0; 189 | getWindowModule.getWindow().pageYOffset = 20; 190 | // We're pretending that the same scroll position has already been saved. 191 | getWindowModule.getWindow().history.state.scroll = { x: 0, y: 20 }; 192 | 193 | scrollRestorer.start(); 194 | scrollRestorer.restoreScroll(); 195 | scrollRestorer.end(); 196 | 197 | expect(getWindowModule.getWindow().scrollTo).not.toHaveBeenCalled(); 198 | }); 199 | 200 | it('returns early if no saved scroll positions exist', function() { 201 | getWindowModule.getWindow().requestAnimationFrame = jest.fn(); 202 | scrollRestorer.restoreScroll({ foo: 'bar' }); 203 | expect( 204 | getWindowModule.getWindow().requestAnimationFrame 205 | ).not.toHaveBeenCalled(); 206 | }); 207 | }); 208 | 209 | describe('end', function() { 210 | it('removes the scroll event listener with identical arguments', function() { 211 | scrollRestorer.start(); 212 | scrollRestorer.end(); 213 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 214 | .mock.calls[0]; 215 | var removeEventListenerArgs = getWindowModule.getWindow() 216 | .removeEventListener.mock.calls[0]; 217 | // Let's verify that this is the scroll event listener. 218 | expect(addEventListenerArgs[0]).toEqual('scroll'); 219 | // Let's verify that our handler function is === when adding and removing. 220 | expect(addEventListenerArgs[1]).toBe(removeEventListenerArgs[1]); 221 | expect(addEventListenerArgs).toEqual(removeEventListenerArgs); 222 | }); 223 | 224 | it('removes the popstate event listener with identical arguments', function() { 225 | scrollRestorer.start({ autoRestore: true }); 226 | scrollRestorer.end(); 227 | var addEventListenerArgs = getWindowModule.getWindow().addEventListener 228 | .mock.calls[1]; 229 | var removeEventListenerArgs = getWindowModule.getWindow() 230 | .removeEventListener.mock.calls[1]; 231 | // Let's verify that this is the popstate event listener. 232 | expect(addEventListenerArgs[0]).toEqual('popstate'); 233 | // Let's verify that our handler function is === when adding and removing. 234 | expect(addEventListenerArgs[1]).toBe(removeEventListenerArgs[1]); 235 | expect(addEventListenerArgs).toEqual(removeEventListenerArgs); 236 | }); 237 | }); 238 | }); 239 | -------------------------------------------------------------------------------- /util/get_window.js: -------------------------------------------------------------------------------- 1 | // This makes window mockable in Jest tests 2 | function getWindow() { 3 | return window; 4 | } 5 | 6 | module.exports = { getWindow: getWindow }; 7 | --------------------------------------------------------------------------------