npm package: @gluedigital/scrollastic
Description: Hooks to deal with scroll
Latest version: 2.1.1

# scrollastic

A simple library of hooks to deal with scroll events, such as parallax
and elements that change on scroll.

## Hooks

The following hooks are available:

### useAtTop

Returns a boolean indicating whether we are at the top of the scroll or not.

Parameters:

| Name       | Type                   | Description                            | Default         |
| ---------- | ---------------------- | -------------------------------------- | --------------- |
| scrollable | React Ref / DOMElement | The scroll parent to use for measuring | documentElement |

### useAtBottom

Returns a boolean indicating whether we are at the bottom of the scroll or not.

Parameters:

| Name       | Type                   | Description                            | Default         |
| ---------- | ---------------------- | -------------------------------------- | --------------- |
| scrollable | React Ref / DOMElement | The scroll parent to use for measuring | documentElement |

### useScrollBelow

Returns a boolean indicating whether we are below a given scroll threshold or not.

Parameters:

| Name       | Type                   | Description                                        | Default         |
| ---------- | ---------------------- | -------------------------------------------------- | --------------- |
| **px**     | number                 | The threshold below which the value should be true |
| scrollable | React Ref / DOMElement | The scroll parent to use for measuring             | documentElement |

### useScrollBetween

Returns a value between 0 and 1 proportional to the scroll position between the given bounds.

Parameters:

| Name       | Type                   | Description                            | Default         |
| ---------- | ---------------------- | -------------------------------------- | --------------- |
| **start**  | number                 | The start of the scroll range          |
| **end**    | number                 | The end of the scroll range            |
| scrollable | React Ref / DOMElement | The scroll parent to use for measuring | documentElement |

### useScrollOver

Returns a value between 0 and 1 proportional to the scroll position over a element.  
The value will be 0 until the element starts showing, will increase linearly, and reach 1 just as the element leaves the screen.

Parameters:

| Name       | Type                   | Description                                                       | Default         |
| ---------- | ---------------------- | ----------------------------------------------------------------- | --------------- |
| **query**  | string                 | A query string (ie: for querySelector) to pick the target element |
| scrollable | React Ref / DOMElement | The scroll parent to use for measuring                            | documentElement |

### useScrollSelector

Returns a value depending on which element is scrolled into view.  
By default, it returns the ID of the closest element above the window top.

Parameters:

| Name      | Type   | Description                                                           | Default    |
| --------- | ------ | --------------------------------------------------------------------- | ---------- |
| **query** | string | A query string (ie: for querySelectorAll) to pick the target elements |
| opts      | object | Other parameters                                                      | See below. |

Opts:

| Name       | Type                   | Description                                                                                    | Default         |
| ---------- | ---------------------- | ---------------------------------------------------------------------------------------------- | --------------- |
| mapper     | function               | Maps the current element to the returned value                                                 | (e) => e.id     |
| boundary   | string                 | The threshold from the screen top at which we measure the current element. Can be in px or vh. | 0px             |
| fromBottom | boolean                | Whether the boundary should be measured from the screen bottom instead                         | false           |
| scrollable | React Ref / DOMElement | The scroll parent to use for measuring                                                         | documentElement |