I have an overlay div that when I scroll it works as expected, but I intend to change the scroll bar movement. So when I move the content to the right, the scroll bar should move to the left (and not with the default behaviour). How can I achieve this?
2
Answers
To achieve a custom scrollbar behavior where it moves in the opposite direction of the content scroll, you can use JavaScript to listen for scroll events and update the scrollbar position accordingly. Here’s an example of how you can accomplish this:
HTML:
JavaScript:
In this example, we listen for the scroll event on the overlay element. When the user scrolls, we calculate the scrollbar position as a percentage by dividing the current scroll left value by the maximum scroll left value. Then we calculate the new scroll left value in the opposite direction by subtracting the scroll percentage from 100 and multiplying it by the maximum scroll left value divided by 100. Finally, we update the scrollbar position by setting the scrollLeft property of the overlay element to the new scroll left value.
I’d recommend looking at this article on geeksforgeeks.org by Aditya Taparia, where he walks you through how to do it using plain CSS step-by-step: https://www.geeksforgeeks.org/how-to-change-the-position-of-scrollbar-using-css/