Skip to content
A tiny scroll management library using native DOM APIs.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
package
README.md

README.md

scroll-restoration

A tiny scroll management library that uses native DOM APIs, ~372 bytes.

js-standard-style

Install

npm i scroll-restoration --save

Usage

Import, then call scroller.init(). This will listen for beforeunload events, check for scrollPosition property on the window, and restore that position on page load.

import scroller from 'scroll-restoration'

scroller.init()

For SPAs, you'll want to save scroll position before new routes, and restore position when returning to previous routes:

// new route
scroller.save()

// popstate, return to previous route
scroller.restore()

Optionally, restore() can accept a callback as it's first and only parameter. If provided, the callback will be fired with the scrollPosition property, and you can do what you will with it. Use this for animated scrolling, etc.

scroller.restore(pos => {
  // handle scrolling
})

The save() method also accepts an optional param, y, which is a scroll position (in px).

scroller.save(365)

The scrollPosition value is stored on the history object i.e. history.state.scrollPosition. For convenience, you can also call:

scroller.state() // returns scrollPosition

Example

To run the example, clone this repo, then:

# move into example dir
cd srraf/example
# install deps
npm i
# compile JS
npm run js:build # or js:watch
# serve index.html and update with changes
live-server 

MIT License

You can’t perform that action at this time.