react-scrollbars-custom
react-scrollbars-custom copied to clipboard
xobotyi
Thumb is not working well in RTL
What is the current behavior?
Thumb has wrong position on RTL
Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-scrollbars-custom. Paste the link to your JSFiddle or CodeSandbox example below:
https://codesandbox.io/s/rsc-live-example-forked-s8ib9?file=/src/RSCExample.jsx
What is the expected behavior?
if you edit /public/index.html and replace <body dir='rtl'> with <body> you can see scroll thumb works well , but in RTL mode its out of visible view
A little about versions:
- OS: No matter , but I use windows 10
- Browser (vendor and version): Version 84.0.4147.135 (Official Build) (64-bit)
- React: 16.13.1
-
react-scrollbars-custom: 4.0.25 - Did this worked in the previous package version? I don't know!
@xobotyi I think if you negate thumbOffset in rtl mode in translateX(${thumbOffset}px) it's fixed
https://github.com/xobotyi/react-scrollbars-custom/blob/18040eddf1439eed2471aae30dc0e93831270872/src/Scrollbar.tsx#L1060