react-custom-scrollbars-2 icon indicating copy to clipboard operation
react-custom-scrollbars-2 copied to clipboard

[Enhancement] Smooth scrolling when calling a "scroll" function

Open Rechdan opened this issue 3 years ago • 3 comments

Right now the scrollbar jumps toward were we ask it to go, but would be great an option that let us make this a smooth animation.

Rechdan avatar Oct 25 '21 01:10 Rechdan

Can you share an example so I can see how you are scrolling?

RobPethick avatar Nov 08 '21 19:11 RobPethick

I'm trying to do the same thing. I created a ref and a basic button to scroll from the top by 200. This was based off the documentation.

https://github.com/RobPethick/react-custom-scrollbars-2/blob/master/docs/API.md#methods

However when performing the scroll, it just jumps to that location without doing a smooth transition. Any way to be able to handle a smooth transition?

const scrollerRef = React.useRef();
 <Scrollbars
     ref={(ref) => (scrollerRef.current = ref)}
     ...
     
 <Button
    onClick={() => {  
        scrollerRef.current.scrollTop(200);
   }} >
   Scroll Down
</Button>    

rmatesicZavy avatar Nov 18 '21 05:11 rmatesicZavy

Hey, I implemented this in my branch. You can install it by doing npm uninstall react-custom-scrollbars-2 && npm install fourjr/react-custom-scrollbars-2#59505ce53d3ca0e77fa715ff44274dee069eef98.

scrollToTop('smooth') or scrollTop(200, 'smooth') should work then.

fourjr avatar Dec 14 '21 05:12 fourjr