fisshy / react-scroll

React scroll component
https://github.com/fisshy/react-scroll/blob/master/README.md
MIT License
4.36k stars 437 forks source link

Scrolling not smooth after content height reduced #424

Open dottodot opened 4 years ago

dottodot commented 4 years ago

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 commented 4 years ago

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,
    }