fengxianqi / Remember Scroll
Licence: mit
🎯 A plugin using localStorage to remember element scroll-position when closed the page.
Stars: ✭ 33
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Remember Scroll
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+2109.09%)
Mutual labels: localstorage
Nice Anim
An animate on scroll Web Component built with StencilJS
Stars: ✭ 23 (-30.3%)
Mutual labels: scroll
React Native Localstorage
Manage LocalStorage items in a web environment
Stars: ✭ 11 (-66.67%)
Mutual labels: localstorage
Storagedb
MongoDB-like API for HTML5 Storage (localStorage and sessionStorage)
Stars: ✭ 16 (-51.52%)
Mutual labels: localstorage
Broadcast Channel
📡 BroadcastChannel to send data between different browser-tabs or nodejs-processes 📡
Stars: ✭ 843 (+2454.55%)
Mutual labels: localstorage
Nano Sql
Universal database layer for the client, server & mobile devices. It's like Lego for databases.
Stars: ✭ 717 (+2072.73%)
Mutual labels: localstorage
Eager Image Loader
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.
Stars: ✭ 22 (-33.33%)
Mutual labels: scroll
Fuckmyscroll.js
🔮 Animated scrolling to certain point or anchor
Stars: ✭ 10 (-69.7%)
Mutual labels: scroll
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✭ 781 (+2266.67%)
Mutual labels: localstorage
Infinite Ajax Scroll
Turn your existing pagination into infinite scrolling pages with ease
Stars: ✭ 804 (+2336.36%)
Mutual labels: scroll
Aframe Persist Component
Persisting Aframe attribute data using localStorage
Stars: ✭ 10 (-69.7%)
Mutual labels: localstorage
Mos
一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently for your mouse on macOS
Stars: ✭ 7,772 (+23451.52%)
Mutual labels: scroll
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-63.64%)
Mutual labels: scroll
Scroll Through Time
⌛️ 🎩 🐇 Two fingers scroll moves through time instead of space
Stars: ✭ 720 (+2081.82%)
Mutual labels: scroll
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+2454.55%)
Mutual labels: scroll
Scroll Snap Carousel
Carousel based on CSS Scroll Snap functionality
Stars: ✭ 31 (-6.06%)
Mutual labels: scroll
Use Persisted State
A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
Stars: ✭ 943 (+2757.58%)
Mutual labels: localstorage
Proxy Storage
Provides an adapter for storage mechanisms (cookies, localStorage, sessionStorage, memoryStorage) and implements the Web Storage interface
Stars: ✭ 10 (-69.7%)
Mutual labels: localstorage
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.
文章介绍：
Demo
Installation
npm i remember-scroll --save
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 |
Browser Support
This library relies on localStorage.
| Chrome | Edge | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].