Rotating a scrollbar's thumb whilst scrolling

Question

I want to make this effect happen, where when I have a scrollbar on my element, while scrolling I want the image of the thumb to rotate 180deg, so essentially If I would have an image of an arrow pointing down at first, then when scrolling to the bottom of my element the arrow would be pointing up.

Here is the link to my codesandbox project

My project is setup as follows:

• I am using an extra component called vue-simplebar which is basically a JS based scrollbar
• On the component i have @scroll which refers to a method while scrolling, here I can get the scrollbar thumb position however I want it (for now in a percentage).
• The :style binding lets me set the CSS value

    <simplebar
          @scroll="getScrollPosition"
          :style="'--scrollPos: ${scrollPosition}'"
          ...
        >
        ...
    </simplebar>

• Right now, the value I get from scrolling I use to change the background-y position of my scrollbar, just to see if it it all works, and it works.

The problems I am facing:

• When rotating the scrollbar-thumb It seems to rotate the track aswell, so what happens is my image is rotated but it is not on the track and just goes out of bounds and so seems to be the track as when I scroll it just goes straight over: https://i.stack.imgur.com/UEl0O.jpg

• I tried this post but setting my scrollbar parent element to relative made my content go away, since well I dont really have any content inside there, so I added a width, but still, when the thumb is rotated, it scrolls out of the track

• I have tried transform-origin but again, the rotator seems to rotate the whole track.

Conclusion for now:

Basically rotating anything in the scrollbar seems to rotate the whole track, is there something I am missing or is this even possible?

The section option I actually thought of is using a gif instead, and changing the animation whilst scrolling.

UPDATE:

I found that If I set my scrollbar parent to positon relative, I had to set my scrollbars parent width aswell.

This for some reason pushes things out of place, but I can fix that with the right: attribute.

Then I set my thumb size which is 50px in widht, this smaller size is best to work with, otherwise when rotating the sides go out of the scroller.

And to have my thumb move to the end and back of the thumb container, I again use the top attribute and change that whilst moving.

In theory everything works right now, it rotates and moves, The only problem I am facing is getting the top: value to move into the right position.

What I mean by that Is, my scrollPos value is from 0-100% but my element size can vary, so setting top to 100% in many cases will push my thumb outside of the track container

.simplebar-scrollbar{


  position: relative;
  width: 60px;
  right: -30px;

}
    .simplebar-scrollbar:before {

  // positioning
  position: absolute !important;
  z-index: -1 !important;

  // this is where I change the thumb position to ensure the 
  // thumb moves to the bottom most or top most position
  // right now this makes the thumb fall off the track
  // at the bottom most position
  top: var(--scrollPosDeg) !important;
  left: 0 !important;

  // set the whole elements size
  width: 100% !important;
  height: 50px !important;

  
  // set background-image and image size
  background-image: url("...") !important;
  background-size: 50px;
  background-repeat: no-repeat;

  // this is where the rotation happens
  transform: rotate(var(--scrollPosDeg)) !important;
  transform-origin: 50% 50%;

  // these are just overriding default styles
  border-radius: 0;
  opacity: 1 !important;

-Thank you for your time and wisdom