rommguy/react-custom-scroll

Snapping issues and improvements

samrith-s opened this issue · 3 comments

samrith-s commented

Hey, good work with the scrollbar! very lightweight and served my purpose excellently!

I have a few issues which I thought I'd ask you about:

  1. Whenever the scroll nears 0 or scrollHeight, the scroll snaps to the position. This gives a very jaggy feel to it, rather than smoothly positioning itself to that position.
  2. If I scroll too fast, it snaps to the top or the bottom. Is this intended behaviour?

Improvements:

  1. Maybe we could have a scrollToBottom method made available?
  2. Maybe a callback onUpdate whenever the scrollbar has updated?

Thanks!

rommguy commented

Hi, I'm very happy to hear you like it!
I'll start by explaining what is causing both problems you mentioned.

As long as the native scroll behavior is used, which is most of the time, everything works smoothly - the custom scrollbar displays a different design, without interference in the OS scroll mechanism.

The native OS behavior of scroll is that if you reach the edge of the scroll area, and there is another scrollable element containing the current one, the scroll will pass to that element.

If you use the prop allowOuterScroll with "false" (which is the default value) - I need to find some way to stop the scroll events from reaching the OS, or the outer scroll will start.
This means I need to calculate when the scroll is about to reach the edge, move it there myself and stop the events - this causes the strange snapping you see.

I can offer 2 solutions:

  1. If you don't need to block outer scroll, use allowOuterScroll={true} and all your problems are gone
  2. If you still want to block outer scroll, you can try and improve the method "blockOuterScroll" in the file customScroll.js with a better calculation to know when the edge if the scroll is reached - notice this should be cross browsers and OSs making it a difficult task

Regarding the improvements:

  1. There is a prop called "scrollTo" - you can give it a value of Number.MAX_SAFE_INTEGER
  2. Already implemented :) use the prop - "onScroll" - it is called on every change in the scroll position, with the scroll event. I can add the current scrollPos to the arguments if you'de like

Last request - please star the repo if you haven't already, thanks!

rommguy commented

@samrith-s Did I answer the issue ? can I close it ?

samrith-s commented

Hey!

Yes this solves it. Thanks a ton! Sorry I couldn’t respond earlier as I was traveling.

Thanks again!

  • 👍1