I need a way to distinguish manual scroll from programmatically called el.scrollIntoView() I tried to google it and they have some suggestion like to use wheel event and similar, but that is not solving the problem as it is not covering every scroll type ( for example it is not including manual scroll when you drag and drop scrollBar)
Here is the code for better context:
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
const autoScrollDelay: any = useRef(null);
useAutoScroll(autoScrollEnabled);
const pauseAutoScroll = () => {
if (autoScrollEnabled) {
setAutoScrollEnabled(false);
}
clearTimeout(autoScrollDelay.current);
autoScrollDelay.current = setTimeout(() => {
setAutoScrollEnabled(true);
}, 3000);
};
const onScroll = useCallback(
event => {
if (isPlaying) {
pauseAutoScroll();
}
},
[isPlaying, autoScrollEnabled],
);
useEffect(() => {
const list = document.querySelector(
"[data-testid='@panel-layout/content']",
);
list?.addEventListener('scroll', onScroll);
return () => {
list?.removeEventListener('scroll', onScroll);
clearTimeout(autoScrollDelay?.current);
};
}, [onScroll]);
Autoscroll hook
export const useAutoScroll = (enabled = true) => {
const currentTime = useSelector(state => state.timeline.currentTime);
const isPlaying = useSelector(state => state.timeline.isPlaying);
const shouldAutoScroll = currentTime && enabled && isPlaying;
useEffect(() => {
if (shouldAutoScroll) {
const currElUuid = calculateUuid();
const el = document.querySelector(`[data-uuid="${currElUuid}"]`);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}
}, [currentTime, enabled, isPlaying, subs, lastHighlightedUuid]);
};
And then in custom hook I am calling
el.scrollIntoView({ behavior: 'smooth', block: 'end' });
, which triggers the same scroll listener as the manual one, and all the time calls my pauseAutoScroll() method which I need to prevent from being called by scrollIntoView.
Would really appreciate your help 🙌