Spaces:
Sleeping
Sleeping
File size: 1,996 Bytes
8e3dbd3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import { useCallback, useEffect, useRef, useState } from 'react';
export const useScrollAnchor = () => {
const messagesRef = useRef<HTMLDivElement>(null);
const scrollRef = useRef<HTMLDivElement>(null);
const visibilityRef = useRef<HTMLDivElement>(null);
const [isAtBottom, setIsAtBottom] = useState(true);
const [isVisible, setIsVisible] = useState(false);
const scrollToBottom = useCallback(() => {
if (messagesRef.current) {
messagesRef.current.scrollIntoView({
block: 'end',
behavior: 'smooth',
});
}
}, []);
useEffect(() => {
if (messagesRef.current) {
if (isAtBottom && !isVisible) {
messagesRef.current.scrollIntoView({
block: 'end',
});
}
}
}, [isAtBottom, isVisible]);
useEffect(() => {
const { current } = scrollRef;
if (current) {
const handleScroll = (event: Event) => {
const target = event.target as HTMLDivElement;
const offset = 25;
const isAtBottom =
target.scrollTop + target.clientHeight >=
target.scrollHeight - offset;
setIsAtBottom(isAtBottom);
};
current.addEventListener('scroll', handleScroll, {
passive: true,
});
return () => {
current.removeEventListener('scroll', handleScroll);
};
}
}, []);
useEffect(() => {
if (visibilityRef.current) {
let observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setIsVisible(true);
} else {
setIsVisible(false);
}
});
},
{
rootMargin: '0px 0px -150px 0px',
},
);
observer.observe(visibilityRef.current);
return () => {
observer.disconnect();
};
}
});
return {
messagesRef,
scrollRef,
visibilityRef,
scrollToBottom,
isAtBottom,
isVisible,
};
};
|