GKaszewski/pocket-chords
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(app): auto-scroll on iOS using scrollBy with integer accumulator

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-07-11 22:54:17 +02:00
parent 9f844bac2e
commit f513061405
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/app/components/auto-scroll-controls.tsx
View File

@@ -24,14 +24,21 @@ export function AutoScrollControls({ scrollRef }: Props) {
const lastTimeRef = useRef<number>(0);
const cancelledByUser = useRef(false);
const accumulatorRef = useRef(0);
const tick = useCallback(
(time: number) => {
if (!scrollRef.current) return;
const el = scrollRef.current;
if (!el) return;
if (lastTimeRef.current) {
const dt = (time - lastTimeRef.current) / 1000;
scrollRef.current.scrollTop += speed * dt;
accumulatorRef.current += speed * dt;
const px = Math.floor(accumulatorRef.current);
if (px >= 1) {
accumulatorRef.current -= px;
el.scrollBy({ top: px });
}
const el = scrollRef.current;
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 1) {
setPlaying(false);
return;
@@ -46,6 +53,7 @@ export function AutoScrollControls({ scrollRef }: Props) {
useEffect(() => {
if (playing) {
lastTimeRef.current = 0;
accumulatorRef.current = 0;
cancelledByUser.current = false;
rafRef.current = requestAnimationFrame(tick);
} else {