Scroll service
The scroll service runs registered callbacks on page scroll.
Usage
import { useScroll } from '@studiometa/js-toolkit';
const { add, remove, props } = useScroll();
add('custom-id', (props) => {
console.log(props.x); // the horizontal position of the scroll
console.log(props.y); // the vertical position of the scroll
console.log(props.changedX); // will be `true` when the `x` scroll has changed
});
// Get the latest prop object
console.log(props());
// Remove the callback
remove('custom-id');IMPORTANT
A throttle of 100 ms is configured to limit the execution of each scroll callback to a minimum. If you need 60 FPS animations, use the raf service.
Props
x
- Type:
Number
The current horizontal scroll position.
y
- Type:
Number
The current vertical scroll position.
changed
- Type:
Object - Interface:
{ x: boolean, y: boolean }
For both axis, whether or not the current position has changed since the last one.
changedX
- Type:
boolean
Shorthand for changed.x.
changedY
- Type:
boolean
Shorthand for changed.y.
last
- Type:
Object - Interface:
{ x: number, y: number }
The last position on both the x and y axis.
lastX
- Type:
number
Shorthand for last.x.
lastY
- Type:
number
Shorthand for last.y.
delta
- Type:
Object - Interface:
{ x: number, y: number }
The difference between the last position and the current one.
deltaX
- Type:
number
Shorthand for delta.x.
deltaY
- Type:
number
Shorthand for delta.y.
progress
- Type:
Object - Interface:
{ x: number, y: number }
The scroll position on both axis mapped to a 0 to 1 range, based on the max property.
progressX
- Type:
number
Shorthand for progress.x.
progressY
- Type:
number
Shorthand for progress.y.
max
- Type:
Object - Interface:
{ x: number, y: number }
The maximum value the scroll can reach.
maxX
- Type:
number
Shorthand for max.x.
maxY
- Type:
number
Shorthand for max.y.
direction
- Type:
Object - Interface
{ x: 'LEFT'|'RIGHT'|'NONE', y: 'UP'|'DOWN'|'NONE' }
The direction of the scroll.
isUp
- Type:
boolean
Shorthand for direction.y === 'UP'.
isRight
- Type:
boolean
Shorthand for direction.x === 'RIGHT'.
isDown
- Type:
boolean
Shorthand for direction.y === 'DOWN'.
isLeft
- Type:
boolean
Shorthand for direction.x === 'LEFT'.