项目作者: MuuKojima

项目描述 :
Simple scroll restore library
高级语言: JavaScript
项目地址: git://github.com/MuuKojima/simple-scroll-restorer.git
创建时间: 2020-08-16T08:21:00Z
项目社区:https://github.com/MuuKojima/simple-scroll-restorer

开源协议:MIT License

下载


Simple Scroll Restorer

License: MIT
npm version

simple scroll restoration for keeping scroll position

Installation

  1. $ npm install --save simple-scroll-restorer

Demo

https://simple-scroll-restorer.netlify.app/

  1. $ cd demo
  2. $ npm install .
  3. $ npm run start
  4. -> localhost:8080

Real Application Demo

https://hostile-architecture.org/

Usage

Initialize library

Your app.js somthing like this

  1. import ScrollRestoreManager from 'simple-scroll-restorer';
  2. mount() {
  3. ScrollRestoreManager.observe();
  4. }
  5. unmount() {
  6. ScrollRestoreManager.unobserve();
  7. }

Restore scroll position

Your router.js somthing like this

  1. import ScrollRestoreManager from 'simple-scroll-restorer';
  2. onAfter() {
  3. const savedPosisiton = ScrollRestoreManager.getSavedPostion();
  4. if (!savedPosisiton) {
  5. window.scrollTo(0, 0);
  6. return;
  7. }
  8. window.scrollTo(savedPosisiton.x, savedPosisiton.y);
  9. }