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 |