mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
feat(renderer): useScrollSync hook (60fps throttling, ratio calc)
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
import { useCallback, useRef } from 'react';
|
||||
|
||||
interface Options {
|
||||
onEditorScroll?: (ratio: number) => void;
|
||||
onPreviewScroll?: (ratio: number) => void;
|
||||
}
|
||||
|
||||
export function useScrollSync(opts: Options) {
|
||||
const FRAME_MS = 1000 / 60;
|
||||
const lastTick = useRef(-FRAME_MS);
|
||||
|
||||
const handleEditorScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
|
||||
const target = evt.currentTarget;
|
||||
const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
|
||||
const now = performance.now();
|
||||
if (now - lastTick.current < FRAME_MS) return;
|
||||
lastTick.current = now;
|
||||
opts.onEditorScroll?.(ratio);
|
||||
}, [opts]);
|
||||
|
||||
const handlePreviewScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
|
||||
const target = evt.currentTarget;
|
||||
const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
|
||||
opts.onPreviewScroll?.(ratio);
|
||||
}, [opts]);
|
||||
|
||||
return { handleEditorScroll, handlePreviewScroll };
|
||||
}
|
||||
Reference in New Issue
Block a user