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 |