Have ideas to improve npm?Join in the discussion! »

    @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

    Install

    npm i @anakinyuen/scroll-direction

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    63 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar