Scroll Target Trigger

Lightweight, dependency free, scroll event methods.

Dependencies

• Node.js

Installation

Install the package into your project using NPM, or download the sources.

$ npm install scroll-target-trigger

Usage

There are two ways you can use this package. One is by including the JavaScript source directly. The other is by importing the module into your component.

Script include

After you build the distribution sources the set-up is fairly simple..

<script type="text/javascript" src="path/to/scroll-target-trigger.min.js"></script>

<script type="text/javascript">
  scrollTargetTrigger(element | position, callback).trigger(threshold);
</script>

Module import

If your using a modern framework like Aurelia, Angular, React, or Vue

import ScrollTargetTrigger from 'scroll-target-trigger';

const scroll = new ScrollTargetTrigger(element | position, callback);
scroll.target(behavior);

Methods

The following methods are supported by this package:

| Method | Description | Argument (optional) | |-----------|-------------------------------------------------------------------|-----------------------| | target | Scroll to an Element or document position when executed. | auto, instant, smooth | | trigger | Run callback when scrolled to Element or document position. | Number default: 100 | | destroy | Removes registered scroll event listener. | |

Examples

Add a class name to an Element when scrolled to position.

const elm = document.getElementById('target');

scrollTargetTrigger(elm, function(active) {
  if (active) {
    elm.classList.add('triggered');
  } else {

    // Remove at 100px above 'target'
    elm.classList.remove('triggered');
  }
}).trigger(100);

Scroll to an Element position instantly in a single jump.

const elm = document.getElementById('target');

const scroll = new ScrollTargetTrigger(elm);
scroll.target('instant');

Scroll to document position in a smooth animation.

const scroll = new ScrollTargetTrigger(500); // Y: 500px
scroll.target('smooth');

Developers

CLI options

Run ESLint on project sources:

$ npm run lint

Transpile ES6 sources (using Babel) and minify to a distribution:

$ npm run build

Run WebdriverIO E2E tests:

$ npm run test

Motivation

In the sea of NPM packages related to scroll events, many of the packages I evaluated are..

• Unsupported, or have been completely abandoned.
• Tightly coupled with the jQuery or <insert SPA framework here>.
• Contain unnecessary usage of 3rd-party dependencies.
• Rich with features, but limited callback support.

In the end, I wanted a single library, no dependencies, with a simple interface (no bells and whistles) that provides target and trigger event handlers with callback support.

My search fell short so I created this package.

Contributions

If you fix a bug, or have a code you want to contribute, please send a pull-request with your changes. (Note: Before committing your code please ensure that you are following the Node.js style guide)

Versioning

This package is maintained under the Semantic Versioning guidelines.

License and Warranty

This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.

scroll-target-trigger is provided under the terms of the MIT license

Author

Marc S. Brooks