scroll-direction

0 dependency JavaScript library for monitoring scroll direction in the element. (Inspired by scrolldir)

Key Features

• no dependency
• minimal size: weighing 1.9KB only (scroll-direction.esm.js)
• noise cancellation: only changing its direction attribute when scrolled a significant amount
• support any DOM element: any scrollable DOM element can be observed
• support event system: just provide a Dispatchable object, ScrollDirection will notify when the scroll direction changes

Installation

npm

$ npm install @anakinyuen/scroll-direction

Direct include

Simply download and include with a script tag.

<script src="dist/scroll-direction.umd.js"></script>

or

Using import statement

You may also import scroll-direction directly to your source code

import ScrollDirection from '@anakinyuen/scroll-direction';

Usage

Create ScrollDirection instance in ts

const scrollDirection = new ScrollDirection();
scrollDirection.start(); // start listening to scroll event

Options

attribute

Type: string Default: "data-scroll-direction"

Attribute name for storing the scroll direction.

direction

Type: "up" | "down" Default: "down"

Initial value for data-scroll-direction.

addAttributeTo

Type: HTMLElement Default: document.documentElement

The element that data-scroll-direction will be added to.

element

Type: HTMLElement Default: document.documentElement

The element that ScrollDirection should observe.

thresholdPixels

Type: number Default: 64

The number of pixels to scroll before re-evaluating the direction

historyMaxAge

Type: number Default: 512

The maximum duration for a record to determine the scroll direction.

historyLength

Type: number Default: 32

The number of records to keep to determine the scroll direction.

eventTarget

Type: { dispatchEvent: (event: Event) => boolean; }

Object that can receive events and may have listeners for them.

Compatibility

For scroll-direction.umd.js

This file is compiled by Babel with the following browserslist.

>0.2%
not dead
not op_mini all

| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Samsung | Opera | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| ✓ | ✓ | ✓ | ✓ | ✓ | ✓

For scroll-direction.esm.js

Requires ES2015 classes and ES2015 module. IE11 and below not supported.

Licensing

MIT license