@anakinyuen/scroll-direction
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Scroll Direction Logo

scroll-direction

license npm version npm bundle size code style: prettier

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
IE11, Edge

For scroll-direction.esm.js

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

Licensing

MIT license

Package Sidebar

Install

npm i @anakinyuen/scroll-direction

Weekly Downloads

8

Version

1.0.1

License

MIT

Unpacked Size

63 kB

Total Files

8

Last publish

Collaborators

  • anakinyuen