Tool to perform an action when a user scrolls in a web page.

Installation

$ yarn add actonscroll

Usage

import Actonscroll from 'actonscroll';

// Passing arguments to the creator
(new Actonscroll({ action: () => console.log('Scrooolling!') }))
  .start();

// Calling specific method for each option
(new Actonscroll())
  .action(() => console.log('Scrooolling!'))
  .start();

// Stop
const actonscroll = new Actonscroll();
actonscroll.start();
actonscroll.stop();

Documentation

Actonscroll

Executes a predefined action when the scroll event is triggered.

Kind: global class

• Actonscroll
  • .container(container) ⇒ Actonscroll
  • .action(action) ⇒ Actonscroll
  • .conditions(conditions) ⇒ Actonscroll
  • .throttling(throttling) ⇒ Actonscroll
  • .once([once]) ⇒ Actonscroll
  • .start()
  • .stop()

new Actonscroll([options])

| Param | Type | | --- | --- | | [options] | Object | | [options.container] | Document / Element | | [options.action] | function | | [options.conditions] | Object | | [options.throttling] | number | | [options.once] | boolean |

actonscroll.container(container) ⇒ Actonscroll

Sets the container element within which the scroll will be listened.

Kind: instance method of Actonscroll

| Param | Type | | --- | --- | | container | Element |

Example

actonscroll.container(document.querySelector('.my-container'));

actonscroll.action(action) ⇒ Actonscroll

Sets an action to be performed when the scroll event is triggered.

Kind: instance method of Actonscroll

| Param | Type | | --- | --- | | action | function |

Example

actonscroll.action(() => console.log('Scrooolling!'));

actonscroll.conditions(conditions) ⇒ Actonscroll

Sets a list of conditions to determine whether the configured action has to be performed or not.

Kind: instance method of Actonscroll

| Param | Type | Description | | --- | --- | --- | | conditions | Object | | | conditions.directions | Array.<string> | Allowed values: 'all', 'vertical', 'horizontal', 'up', 'down', 'left', 'right'. | | conditions.offset | Object | { x, y } (In pixels). | | conditions.custom | function | |

Example

actonscroll.conditions({
  directions: ['up', 'left'],
  offset: { y: 200 },
  custom: () => true,
});

actonscroll.throttling(throttling) ⇒ Actonscroll

Sets a throttling time (ms) to the scroll event.

Kind: instance method of Actonscroll

| Param | Type | | --- | --- | | throttling | number |

Example

actonscroll.throttling(1000);

actonscroll.once([once]) ⇒ Actonscroll

Determines whether the action should be performed once or not.

Kind: instance method of Actonscroll

| Param | Type | Default | | --- | --- | --- | | [once] | boolean | true |

Example

actonscroll.once();

actonscroll.start()

Executes the configured action after checking that all the conditions are satisfied.

Kind: instance method of Actonscroll Example

actonscroll.start();

actonscroll.stop()

Removes the actonscroll from the configured container.

Kind: instance method of Actonscroll Example

actonscroll.stop();