correct-apricot

custom scrollToFn performance issue

This function below aims to reproduce a linear scroll animation, it's working nicely on high end devices but it becomes laggy on low end devices and can't figure out why.. I know this can work smoothly on low end device because without a scrollToFn and with scrollBehvaior: "smooth" the animation is smooth BUT as scroll-behavior is not linear (look like easeInOut), when we start spamming index increase, the animation goes out of hands... (even with a throttle on input) any help would be appareciated 🙌

    const scrollToFn: VirtualizerOptions<any, any>['scrollToFn'] = useCallback(
        (offset, canSmooth, instance) => {
            const start = parentRef.current.scrollTop;
            const startTime = (scrollingRef.current = Date.now());

            const run = () => {
                if (scrollingRef.current !== startTime) return;
                const now = Date.now();
                const elapsed = now - startTime;

                const progress = Math.min(elapsed / animationDuration, 1);

                const interpolated = start + (offset - start) * progress;

                if (elapsed < animationDuration) {
                    elementScroll(interpolated, canSmooth, instance);
                    requestAnimationFrame(run);
                } else {
                    elementScroll(interpolated, canSmooth, instance);
                }
            };

            window.requestAnimationFrame(run);
        },
        []
    );

    const scrollToFn: VirtualizerOptions<any, any>['scrollToFn'] = useCallback(
        (offset, canSmooth, instance) => {
            const start = parentRef.current.scrollTop;
            const startTime = (scrollingRef.current = Date.now());

            const run = () => {
                if (scrollingRef.current !== startTime) return;
                const now = Date.now();
                const elapsed = now - startTime;

                const progress = Math.min(elapsed / animationDuration, 1);

                const interpolated = start + (offset - start) * progress;

                if (elapsed < animationDuration) {
                    elementScroll(interpolated, canSmooth, instance);
                    requestAnimationFrame(run);
                } else {
                    elementScroll(interpolated, canSmooth, instance);
                }
            };

            window.requestAnimationFrame(run);
        },
        []
    );

2 Replies

ratty-blush•2y ago

Any update on this? Thanks

passive-yellow•2y ago

Hard to say without codesandbox example

Gaming

Programming

custom scrollToFn performance issue

Did you find this page helpful?