57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import _ from 'lodash';
|
|
import { useRef } from 'react';
|
|
|
|
export default function useContainerScroll(
|
|
container: any,
|
|
options?: { toBottom?: boolean }
|
|
) {
|
|
const isWheeled = useRef(false);
|
|
const scroller = useRef(container);
|
|
const optionsRef = useRef(options);
|
|
const toBottomFlag = useRef(options?.toBottom);
|
|
const timerRef = useRef<any>(null);
|
|
|
|
const debunceResetWheeled = _.debounce(() => {
|
|
isWheeled.current = false;
|
|
}, 5000);
|
|
|
|
const handleContentWheel = (e: any) => {
|
|
isWheeled.current = true;
|
|
debunceResetWheeled.cancel?.();
|
|
debunceResetWheeled();
|
|
};
|
|
|
|
const scrollerRun = () => {
|
|
const scrollerContainer = scroller.current?.current || {};
|
|
const { scrollHeight, clientHeight, scrollTop } = scrollerContainer;
|
|
if (
|
|
optionsRef.current?.toBottom &&
|
|
toBottomFlag.current &&
|
|
scrollHeight > clientHeight + scrollTop
|
|
) {
|
|
scroller.current.current.scrollTop = scrollHeight;
|
|
// toBottomFlag.current = false;
|
|
isWheeled.current = false;
|
|
} else if (
|
|
!isWheeled.current &&
|
|
scrollHeight > clientHeight + scrollTop &&
|
|
scroller.current?.current
|
|
) {
|
|
scroller.current.current.scrollTop += 10;
|
|
window.requestAnimationFrame(scrollerRun);
|
|
}
|
|
};
|
|
|
|
const updateScrollerPosition = () => {
|
|
if (!isWheeled.current) {
|
|
window.requestAnimationFrame(scrollerRun);
|
|
}
|
|
};
|
|
|
|
return {
|
|
handleContentWheel,
|
|
updateScrollerPosition,
|
|
scroller
|
|
};
|
|
}
|