Spaces:
Build error
Build error
File size: 2,667 Bytes
b59aa07 |
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 89 90 91 92 93 |
import { RefObject, useEffect, useState, useCallback, useRef } from "react";
export function useScrollToBottom(scrollRef: RefObject<HTMLDivElement | null>) {
// Track whether we should auto-scroll to the bottom when content changes
const [autoscroll, setAutoscroll] = useState(true);
// Track whether the user is currently at the bottom of the scroll area
const [hitBottom, setHitBottom] = useState(true);
// Store previous scroll position to detect scroll direction
const prevScrollTopRef = useRef<number>(0);
// Check if the scroll position is at the bottom
const isAtBottom = useCallback((element: HTMLElement): boolean => {
// Use a fixed 20px buffer
const bottomThreshold = 20;
const bottomPosition = element.scrollTop + element.clientHeight;
return bottomPosition >= element.scrollHeight - bottomThreshold;
}, []);
// Handle scroll events
const onChatBodyScroll = useCallback(
(e: HTMLElement) => {
const isCurrentlyAtBottom = isAtBottom(e);
setHitBottom(isCurrentlyAtBottom);
// Get current scroll position
const currentScrollTop = e.scrollTop;
// Detect scroll direction
const isScrollingUp = currentScrollTop < prevScrollTopRef.current;
// Update previous scroll position for next comparison
prevScrollTopRef.current = currentScrollTop;
// Turn off autoscroll only when scrolling up
if (isScrollingUp) {
setAutoscroll(false);
}
// Turn on autoscroll when scrolled to the bottom
if (isCurrentlyAtBottom) {
setAutoscroll(true);
}
},
[isAtBottom],
);
// Scroll to bottom function with animation
const scrollDomToBottom = useCallback(() => {
const dom = scrollRef.current;
if (dom) {
requestAnimationFrame(() => {
// Set autoscroll to true when manually scrolling to bottom
setAutoscroll(true);
setHitBottom(true);
// Use smooth scrolling but with a fast duration
dom.scrollTo({
top: dom.scrollHeight,
behavior: "smooth",
});
});
}
}, [scrollRef]);
// Auto-scroll effect that runs when content changes
useEffect(() => {
// Only auto-scroll if autoscroll is enabled
if (autoscroll) {
const dom = scrollRef.current;
if (dom) {
requestAnimationFrame(() => {
dom.scrollTo({
top: dom.scrollHeight,
behavior: "smooth",
});
});
}
}
});
return {
scrollRef,
autoScroll: autoscroll,
setAutoScroll: setAutoscroll,
scrollDomToBottom,
hitBottom,
setHitBottom,
onChatBodyScroll,
};
}
|