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
import
statement
Using You may also import scroll-direction
directly to your source code
import ScrollDirection from '@anakinyuen/scroll-direction';
Usage
ScrollDirection
instance in ts
Create 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
scroll-direction.umd.js
For 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 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
scroll-direction.esm.js
For Requires ES2015 classes and ES2015 module. IE11 and below not supported.