88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import { throttle } from 'lodash';
|
|
import {
|
|
useOverlayScrollbars,
|
|
UseOverlayScrollbarsParams
|
|
} from 'overlayscrollbars-react';
|
|
import React from 'react';
|
|
|
|
export const overlaySollerOptions: UseOverlayScrollbarsParams = {
|
|
options: {
|
|
update: {
|
|
debounce: 0
|
|
},
|
|
overflow: {
|
|
x: 'hidden'
|
|
},
|
|
scrollbars: {
|
|
theme: 'os-theme-light',
|
|
autoHide: 'scroll',
|
|
autoHideDelay: 600,
|
|
clickScroll: 'instant'
|
|
}
|
|
},
|
|
defer: true
|
|
};
|
|
|
|
export default function useOverlayScroller(options?: any) {
|
|
const scrollEventElement = React.useRef<any>(null);
|
|
const instanceRef = React.useRef<any>(null);
|
|
const [initialize, instance] = useOverlayScrollbars({
|
|
options: {
|
|
update: {
|
|
debounce: 0
|
|
},
|
|
overflow: {
|
|
x: 'hidden'
|
|
},
|
|
scrollbars: {
|
|
theme: options?.theme || 'os-theme-dark',
|
|
autoHide: 'scroll',
|
|
autoHideDelay: 600,
|
|
clickScroll: 'instant'
|
|
}
|
|
},
|
|
defer: true
|
|
});
|
|
instanceRef.current = instance?.();
|
|
scrollEventElement.current =
|
|
instanceRef.current?.elements()?.scrollEventElement;
|
|
|
|
const throttledScroll = React.useMemo(
|
|
() =>
|
|
throttle(() => {
|
|
scrollEventElement.current?.scrollTo?.({
|
|
top: scrollEventElement.current.scrollHeight,
|
|
behavior: 'smooth'
|
|
});
|
|
instanceRef.current?.update?.();
|
|
}, 300),
|
|
[scrollEventElement, instanceRef]
|
|
);
|
|
|
|
const throttledUpdateScrollerPosition = React.useCallback(() => {
|
|
throttledScroll();
|
|
}, [throttledScroll]);
|
|
|
|
// const createInstance = React.useCallback((el: any) => {
|
|
// if (el) {
|
|
// instanceRef.current?.destroy?.();
|
|
// initialize(el);
|
|
// instanceRef.current = instance?.();
|
|
// scrollEventElement.current =
|
|
// instanceRef.current?.elements()?.scrollEventElement;
|
|
// }
|
|
// }, []);
|
|
|
|
React.useEffect(() => {
|
|
return () => {
|
|
instanceRef.current?.destroy?.();
|
|
};
|
|
}, []);
|
|
|
|
return {
|
|
initialize,
|
|
instance: instanceRef.current,
|
|
updateScrollerPosition: throttledUpdateScrollerPosition
|
|
};
|
|
}
|