I was working on a project and everything seemed easy until I hit a roadblock.
What I am trying to achieve is expanding a div to 100% when scrolling down to the bottom of the div, then shrink it back to 90% at the bottom and do the reverse when scrolling up. In other words, the width of the div at the top and bottom should be controlled by the scroll direction.
The project I'm working on is using SSR next.js
I attempted to use the parallax library from this link but it didn't solve my issue.
You can see a live sample here: https://stackblitz.com/edit/react-ybdmbn?file=src/components/AdjustContainer.jsx
I also tried using the useEffect hook as shown below:
const [adjustWidth, setAdjustWidth] = useState()
const adjustRef = useRef();
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [adjustRef.current]);
const handleScroll = () => {
console.log('scrollTop', adjustRef.current.scrollTop);
if (adjustRef.current) {
const { scrollTop, scrollHeight, clientHeight } = adjustRef.current;
if (scrollTop + clientHeight === scrollHeight) {
// do something here
console.log('Reached Bottom');
}
}
};
<div className={styles.AdjustContainer} ref={adjustRef}>
{myContent.map((module, i) => (
<MyContent {...module} key={i} />
))}
</div>