react-element-scroll-hook v1.1.0
react-element-scroll-hook
A react hook to use the scroll information of an element.
Install
npm install react-element-scroll-hook
Usage
// Import the hook
import useScrollInfo from 'react-element-scroll-hook';
function Mycomponent(props) {
// Initialize the hook
const [scrollInfo, setRef] = useScrollInfo();
// Use the scrollInfo at will
console.log(scrollInfo);
// use setRef to indicate the element you want to monitor
return (
<div id="content" ref={setRef}>
{props.children}
</div>
);
}
scrollInfo object
When using this hook, you'll get an object containing the scroll data. It has two keys, x
and y
, each of them contain the following keys:
- value: amount of pixels scrolled
- total: amount of pixels that can be scrolled
- percentage: a value from 0 to 1 or
null
if there's no scroll - className: a string to identify the state of the scroll
- direction: the direction of the last scroll: 1 for down/right, -1 for up/left, 0 for initial value
className
For the y axis, className can take 4 values:
scroll-top
, scroll-middle-y
, scroll-bottom
, and no-scroll-y
.
For the x axis, the values are:
scroll-left
, scroll-middle-x
, scroll-right
, and no-scroll-x
.
Example scrollInfo object
{
x: {
percentage: 0.5,
value: 120,
total: 240,
className: 'scroll-middle-x',
direction: 1
},
y: {
percentage: 1,
value: 200,
total: 200,
className: 'scroll-bottom',
direction: -1
}
}
Basic Example
In this basic example, we'll add the scroll Y className to a component, to later style it with CSS based on weather it's scrolle or not.
// Import the hook
import useScrollInfo from 'react-element-scroll-hook';
function Mycomponent(props) {
// Initialize the hook
const [scrollInfo, setRef] = useScrollInfo();
return (
<div id="content" ref={setRef} className={scrollInfo.y.className}>
{props.children}
</div>
);
}
Accessing the element ref
If you also need to access the monitored element, you can use the third constant returned by useScrollInfo
:
function Mycomponent(props) {
// Initialize the hook
const [scrollInfo, setRef, ref] = useScrollInfo();
// Do something with the element
console.log(ref.current);
return (
<div id="content" ref={setRef}>
{props.children}
</div>
);
}
Browser compatibility
This should work out of the box on all major browser, including Edge. However, it uses ResizeObserver to work completely flawless. If you want it to work on older browsers properly when the element is resized (but the viewport isn't), you'll need a ResizeObserver polyfill.