RobPethick / react-custom-scrollbars-2

MIT License
145 stars 55 forks source link

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

Open Rechdan opened 2 years ago

Rechdan commented 2 years ago

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.

RobPethick commented 2 years ago

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

rmatesicZavy commented 2 years ago

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>    
fourjr commented 2 years ago

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.