Hooks to deal with scroll
npm install @gluedigital/scrollasticA simple library of hooks to deal with scroll events, such as parallax
and elements that change on scroll.
The following hooks are available:
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 |
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 |
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 |
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 |
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 |
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 |