Maintain Scroll Position Of Scollable Content – scroll-stash

Category: Javascript , Recommended | June 14, 2021
Author:sebnitu
Views Total:1,784 views
Official Page:Go to website
Last Update:June 14, 2021
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.2 (06/14/2020)

  • add npm ci to sink task and run build
  • remove travis and add github build action

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