22 lines
663 B
React
22 lines
663 B
React
|
import { useEffect, useState } from 'react';
|
||
|
|
import styles from './ScrollProgress.module.css';
|
||
|
|
|
||
|
|
export default function ScrollProgress() {
|
||
|
|
const [pct, setPct] = useState(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const update = () => {
|
||
|
|
const el = document.documentElement;
|
||
|
|
const scrolled = el.scrollTop;
|
||
|
|
const total = el.scrollHeight - el.clientHeight;
|
||
|
|
setPct(total > 0 ? (scrolled / total) * 100 : 0);
|
||
|
|
};
|
||
|
|
window.addEventListener('scroll', update, { passive: true });
|
||
|
|
return () => window.removeEventListener('scroll', update);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.bar} style={{ width: `${pct}%` }} aria-hidden="true" />
|
||
|
|
);
|
||
|
|
}
|