23 lines
657 B
TypeScript
23 lines
657 B
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
export const useOceanDepthEffect = () => {
|
|
const [scrollDepth, setScrollDepth] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollPosition = window.scrollY;
|
|
const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const scrollPercentage = Math.min(scrollPosition / documentHeight, 1);
|
|
|
|
setScrollDepth(scrollPercentage);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
handleScroll(); // Initial call
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
return scrollDepth;
|
|
};
|