react-scroll icon indicating copy to clipboard operation
react-scroll copied to clipboard

Scrolling not smooth after content height reduced

Open dottodot opened this issue 4 years ago • 1 comments

I've built a chatbot style app and as the content is added scrolling is smooth. However there are certain actions you take can in the chatbot which reduces the height of the content before more content is added, after doing the the scrolling is no longer smooth. It does tend to sort itself after a while.

Is there anything you can think of that would fix this?

This is what I'm using to preform the scroll

    scroll.scrollToBottom({
        duration: AUTO_SCROLL_DURATION,
        smooth: 'easeOutQuint',
        delay: 200,
        containerId: 'scroll-container',
    });

dottodot avatar Apr 08 '20 11:04 dottodot

Here an example of the scroll data from the animateTopScroll function after the change to the ui which would explain why the animation is no longer smooth, start and target position are the same and the duration hasn't been set.

{
        duration: 1000,
        smooth: 'easeOutQuint',
        containerId: 'scroll-container',
        data: {
            currentPositionY: 0,
            startPositionY: 13786,
            targetPositionY: 13786,
            progress: 0,
            duration: 0,
            cancel: true,
            target: null,
            containerElement: 'div#scroll-container.ChatBot__Scroll',
            to: null,
            start: null,
            deltaTop: null,
            percent: null,
            delayTimeout: null,
        },
        absolute: true,
    }

dottodot avatar Apr 09 '20 17:04 dottodot