remember-scroll
English | 中文
A javascript plugin using localStorage to remember element scroll-position, which can auto scrolls to the last visit position when visiting the page again. Just 3kb gzipped.
文章介绍： 用Class写一个记住用户离开位置的js插件
Demo
Installation
npm i remember-scroll --saveCDN
You can get the latest version on jsdelivr.com.
Usage
Direct <script> Include
remember-scroll examplesES6 module
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 |
Browser Support
This library relies on localStorage.
| Chrome | Edge | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
