62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { RefObject, useEffect, useRef, useState } from "react";
|
|
|
|
export default function useScrollToBottom(
|
|
scrollRef: RefObject<HTMLDivElement>,
|
|
) {
|
|
const detach = scrollRef?.current
|
|
? Math.abs(
|
|
scrollRef.current.scrollHeight -
|
|
(scrollRef.current.scrollTop + scrollRef.current.clientHeight),
|
|
) <= 1
|
|
: false;
|
|
|
|
// for auto-scroll
|
|
const [autoScroll, setAutoScroll] = useState(true);
|
|
|
|
const autoScrollRef = useRef<typeof autoScroll>();
|
|
|
|
autoScrollRef.current = autoScroll;
|
|
|
|
function scrollDomToBottom() {
|
|
const dom = scrollRef.current;
|
|
if (dom) {
|
|
requestAnimationFrame(() => {
|
|
setAutoScroll(true);
|
|
dom.scrollTo(0, dom.scrollHeight);
|
|
});
|
|
}
|
|
}
|
|
|
|
// useEffect(() => {
|
|
// const dom = scrollRef.current;
|
|
// if (dom) {
|
|
// dom.ontouchstart = (e) => {
|
|
// const autoScroll = autoScrollRef.current;
|
|
// if (autoScroll) {
|
|
// setAutoScroll(false);
|
|
// }
|
|
// }
|
|
// dom.onscroll = (e) => {
|
|
// const autoScroll = autoScrollRef.current;
|
|
// if (autoScroll) {
|
|
// setAutoScroll(false);
|
|
// }
|
|
// }
|
|
// }
|
|
// }, []);
|
|
|
|
// auto scroll
|
|
useEffect(() => {
|
|
if (autoScroll && !detach) {
|
|
scrollDomToBottom();
|
|
}
|
|
});
|
|
|
|
return {
|
|
scrollRef,
|
|
autoScroll,
|
|
setAutoScroll,
|
|
scrollDomToBottom,
|
|
};
|
|
}
|