Minimal Scroll Direction Tracking Library – ScrollDir.js

Category: Javascript , Recommended | December 26, 2018
1 Comment
Demo Download
Author:dollarshaveclub
Views Total:555 views
Official Page:Go to website
Last Update:December 26, 2018
License:MIT

Preview:

Minimal Scroll Direction Tracking Library – ScrollDir.js

Description:

ScrollDir.js is a lightweight and dependency-free JavaScript library used to track the vertical scroll direction as you scroll down or up the webpage.

Installation:

# Yarn
yarn add scrollDir
# NPM
npm install scrollDir
# Bower
bower install scrollDir

How to use it:

Import ScrollDir library into your project or directly include the ScrollDir.js on your webpage.

<script src="scrolldir.min.js"></script>

Initialize the scrollDir and we’re ready to go.

scrollDir();

By default, the library will automatically add the following data attributes to the html tag as you scroll down/up the webpage.

<html data-scrolldir="up">
<html data-scrolldir="down">

Then you can apply custom CSS styles to children elements as these:

[data-scrolldir="down"] .header { display: none; }
[data-scrolldir="up"] .header { display: block; }

All possible options to customize the scrollDir.

scrollDir({
  el: document.documentElement,
  win: window,
  attribute: 'data-scrolldir',
  thresholdPixels: 64
});

Changelog:

v1.5.0 (12/26/2018)

  • added threshold pixels option

v1.4.0 (09/10/2018)

  • adds module file and module support

v1.3.0 (09/06/2018)

  • bugfix

See Also:

You Might Be Interested In:

One thought on “Minimal Scroll Direction Tracking Library – ScrollDir.js”

Leave a Reply