Skip to content
🎯 A plugin using localStorage to remember element scroll-position when detached
JavaScript
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.
dist
examples
src
.editorconfig
.eslintrc.js
.gitignore
LICENSE
README.md
README_ZH-CN.md
babel.config.js
package.json
webpack.config.js

README.md

remember-scroll

NPM version npm download jsdelivr license

English | 中文

A plugin using localStorage to remember element scroll-position when detached.

Demo

demo

Installation

npm i remember-scroll --save

CDN

<script src="https://cdn.jsdelivr.net/npm/remember-scroll@latest/dist/remember-scroll.min.js"></script>

You can get the latest version on jsdelivr.com.

Usage

Direct <script> Include

<html>
<head>
  <meta charset="utf-8">
  <title>remember-scroll examples</title>
</head>
<body>
  <script src="../dist/remember-scroll.js"></script>
  <script>
    new RememberScroll({
      pageKey: 'page1',
      maxLength: 5
    })
  </script>
</body>
</html>

ES6 module

import RememberScroll from 'remember-scroll'

new RememberScroll()

Use in Vue

<template>
  <div class="normal">
    <p v-for="item in 100" :key="item">{{ item }}</p>
  </div>
</template>

<script>
import RememberScroll from 'remember-scroll'

export default {
  name: 'normal',
  created () {
    this.rememberScroll = new RememberScroll({
      pageKey: 'your_page_key'
    })
  }
}
</script>

If your page data is async, you can init RememberScroll in the async function, such as,

<template>
  <div class="home">
    <p v-for="item in ele" :key="item">{{ item }}</p>
  </div>
</template>

<script>
import RememberScroll from 'remember-scroll'
export default {
  name: 'home',
  data () {
    return {
      ele: [],
      rememberScroll: null
    }
  },
  created () {
    // async get data.
    setTimeout(() => {
      for (let i = 0; i < 50; i++) {
        this.ele.push(i)
      }
      // init
      this.rememberScroll = new RememberScroll({
        pageKey: 'home'
      })
    }, 2000)
  }
}
</script>

Options

Name Type Default Description
pageKey String '_page1' A unique identity of the page
maxLength Number 5 The max length of page count, prevent localStorage too big
You can’t perform that action at this time.