Maintain Scroll Position Of Scollable Content – scroll-stash

Category: Javascript , Recommended | September 13, 2020
Author:sebnitu
Views Total:13 views
Official Page:Go to website
Last Update:September 13, 2020
License:MIT

Preview:

Maintain Scroll Position Of Scollable Content – scroll-stash

Description:

scroll-stash is a small JavaScript library that saves the user’s scroll position in the local storage and automatically scrolls to the last scroll position on page reload or on the next visit.

In addition, the library also allows you to determine a scroll position to which the page always scroll when your visitors return.

See Also:

How to use it:

1. Load the main script in the document.

<script src="./dist/scripts.js"></script>

2. Add the data-scroll-stash attribute to a scrollable container.

<div class="scroll-box" data-scroll-stash="example">
  ...
</div>

3. Initialize the scroll-stash and done.

const scrollStash = new ScrollStash({
      // options here
});
scrollStash.init();

4. Set a custom scroll position you want to scroll to.

<div class="scroll-box" 
     data-scroll-stash="example"
     data-scroll-stash-anchor=".anchor">
     ...
     <div class="anchor">Active Element</div>
</div>
// or
<div class="scroll-box" 
     data-scroll-stash="example">
     ...
     <div class="is-active">Active Element</div>
</div>
<script>
const scrollStash = new ScrollStash({
      selectorAnchor: '.is-active',
});
</script>

5. All default options.

const scrollStash = new ScrollStash({
      autoInit: false,
      dataScroll: 'scroll-stash',
      dataAnchor: 'scroll-stash-anchor',
      selectorAnchor: '',
      selectorAnchorParent: '',
      selectorTopElem: '',
      selectorBotElem: '',
      saveKey: 'ScrollStash',
      throttleDelay: 500,
      positionBottom: true,
      padding: 16
});

Changelog:

v1.1.1 (09/13/2020)

  • Refactor

v1.0.13 (09/04/2020)

  • remove the vrembem camelcase dependency

v1.0.12 (08/22/2020)

  • Bug Fixes

v1.0.11 (08/15/2020)

  • Refactor

v1.0.10 (08/13/2020)

  • bugfix

v1.0.6 (08/09/2020)

  • fix: convert constructor to a functional instantiation

v1.0.5 (08/08/2020)

  • Bug Fixes

You Might Be Interested In:


Leave a Reply