Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

Overview

vue-remember-scroll-cache

Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

Use case

This plugin was created as a usecase for an ecommerce website. Our category view page has an infinity loader (loads more products as we scroll down). We want to retain the loaded products and scroll position after clicking on a product and redirecting to the product page and then navigating back to the category view page. We want to create a seamless transition going between category view listing and product view page so that the user can continue exploring the available products without losing their progress.

Demo GIF

How it works

  1. Adds click event listeners to the elements (using the developer specified selector) living inside the element that uses the v-remember-scroll-cache directive
  2. When a user clicks on the aforementioned elements, the browser's scroll position is retained as well as the content of the variable that contains all items listed (eg. on an ecommerge category view), the name of the variable can also be configured.
  3. User goes to item page, the one they clicked on.
  4. User goes back to the catalog page
  5. Previously loaded items are inserted by the plugin into the vue component using the directive, thus retaining all items previously loaded
  6. Previous scroll position is restored.
  7. User is at the same place they started and can continue scrolling down without losing their previous position in the category view page πŸ™‚

Installation

npm i --save vue-remember-scroll-cache

Usage

In main.js or any other vue entry point:

import Vue from 'vue'
import VueRememberScrollCache from 'vue-remember-scroll-cache'

Vue.use(VueRememberScrollCache)

In vue component template:

Catalog view .....
">
Catalog view .....

itemsName should contain the name of the internal state variable that holds all items that are listed. In this example our vue component has an internal state variable called products that is an array of all products in our ecommerce category view. this.products will be repopulated with the products loaded earlier when scrolling down the category view of our app.

selector should contain the css element selector to use for applying the click event listeners. In this example we want our plugin to run when a link (a tag) inside our div container is clicked

In component script section:

const prevPage = localStorage.getItem('v-remember-scroll-page')
if (this.$products && this.$products.length > 0 && prevPage === window.location.hostname) {
      this.products = this.$products
}

^^ The plugin creates a global variable in this case ($products) and then deletes it after a short time period (3s), so on mounted of our component, we check if the global var is there and update our internal state. (instead of fetching from the API like normal, this time we want to recover previously loaded content after user navigation to product page and back)

You might also like...
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ Tabl

A managed scroller to dynamically load items

vue-managed-scroller View live demo in sandbox Installation npm install --save vue-managed-scroller or if you prefer yarn yarn add vue-managed-scroll

A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . δΈ­ζ–‡η‰ˆ overview To achieve sigle-page scroll in mobile, support hori

Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Scroll to page top button, Vue.js component.

vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser script src="vue.js"/script script src="vue-go-top.min.js"/scr

Owner
Giorgos Sideris
Giorgos Sideris
A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold or past the threshold

A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold, or past the threshold

javad mnjd 0 Jun 30, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 177 Nov 25, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 533 Nov 20, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 533 Nov 20, 2022
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 183 Nov 17, 2022
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 183 Nov 17, 2022
A vue 2.0 directive to keep scroll position for keep-alived components.

vue-keep-scroll-position A vue 2.0 directive to keep scroll position for keep-alived components. Forked from vue-keep-scroll and rewritten for vue 2.0

Beep LIN 38 Feb 18, 2022
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 454 Nov 17, 2022