Retain your scroll position between pages using an iframe. Especially helpful for infinite scrolling views.
npm install scroll-frameRetain your scroll position between pages using an iframe. Especially helpful for infinite scrolling views.
Insert scroll-frame-head.js into your tag across all views.
```html``
My detail page
Then insert scroll-frame.js into the pages where you have an infinite scrolling list that needs to retain scroll position.
``html``
Finally use the scrollFrame function to indicate what links should retain their scroll position when clicked.
``javascript``
scrollFrame('#my-infinite-scrolling-list a');
For a working example check out the example folder which you can visit a live demo of here or run yourself by cloning the project and running npm run example.
scrollFrame will hijack the user's click for elements that match the query selector you pass in and instead of reloading the page it will append a modal-like iframe that sits on top of your viewport and points to the element's href. It then uses HTML5 history APIs to make the back-button function as expected.
* scrollFrame will only open the next immediate page in an iframe (solving the simple use case of opening a detail page from an infinite scrolling list and then clicking back without losing your position). After clicking on a link inside the iframe the page refreshes to avoid going down a rabbit hole of stacked iframe modals and messy state.
* Because scrollFrame uses HTML5 history APIs it does not work with older browsers and will simply not do anything when included. This should gracefully degrade as it'll just mean older browsers won't retain their scroll position.
Scroll frame will add the scroll-frame-loading class to the
so you can set a loading state while the iframe is loading the page. As an example you may want to do something like body.scroll-frame-loading #scroll-frame-spinner { display: block }`.MIT