How to calculate my scrollbar thumb position whilst accounting for element height

Question

I am building a scrollbar which has a small animation whilst scrolling.

Basically when scrolling I want the thumb of the scrollbar to also rotate while scrolling.

Here is the link to my project

Now the problem is Is I want my thumbs background image to be of a certain size, this is a fixed size and wont change.

What happens is, that the thumbs height size is dependant on the amount of content inside my container, if theres more content then the height of the thumb shrinks and so on.

By having my image a fixed small size I am left with a lot of room inside the thumbs container, view this image -> https://imgur.com/a/YlYwv0B The red is the scrollbar track, and the blue border is the border of my thumb container, and by using the :before selector I add the background-image, and right now in the image it is set to the bottom most position.

Here Is the code how I achieve this, without any variables:

// this is the scrollbar thumb
// I have set its position to be relative, and then adjust the
// positioning of it with left property
.simplebar-scrollbar {
  border: 5px solid blue;
  position: relative;
  width: 60px;
  left: -30px;
}


  // Here I set and manipulate the image of the thumb
  // I need this to have a position absolute to have it rotatable
  .simplebar-scrollbar:before {

  position: absolute !important;

  // 150px with with the default settings 
  //sets the thumb image to bottom most position
  top: 150px !important;

  left: 0 !important;

  // here I define the height and width of my image
  width: 100% !important;
  height: 50px !important;

  z-index: -1 !important;
 
  // Here are the image settings
  background-image: url("..") !important;
  background-size: 50px;
  background-repeat: no-repeat;


  // here I am able to rotate the image how i need it
  transform: rotate( ... ) !important;
  transform-origin: 50% 50%;

  // these are settings to override feault styles
  border-radius: 0;
  opacity: 1 !important;
   
}

So now, I have created a method, which calculates the percentage of the scroll position as such:

 methods: {
    /* Get scrollbar-thumb position */
    getScrollPosition: function (el) {
      let elementHeight = el.target.offsetHeight;
      let scrollTopPos = el.target.scrollTop;
      let maxScrollHeight = el.target.scrollHeight;

      /* This is to calculate the scrollbar-thumb position in percentage */
      let scrollPositionPercentage = Math.ceil(
        (scrollTopPos / (maxScrollHeight - elementHeight)) * 100
      );

      ...

    },
  },

The scrollPositionPercentage is the formula to get the scroll position percentage, so at the top most position it would be 0% and at the bottom most position it would be 100%.

The big problem is that setting the top position from 0-100% doesn't account for the size of element we are scrolling on.

So when my element height aka the offsetHeight is set to 500px my thumb top position should be 150px (or 75%) to be in the bottom most position, when my element height is 600px, then it should be 243px, and so it changes.

To hopefully simplify the problem, here are the static numbers that I get in a setting where everything works properly:

offsetHeight = 500 *(this is my element height, this is the one that changes and I need to account for)*
scrollTopMax = 685 *(so this is scrolltop when scrolled to the bottom)*

With these settings, top position should get to 150px to when bottom is reached

I found that with this formula I can detect when my thumb has reached the bottom:

el.srcElement.offsetHeight + el.srcElement.scrollTop) >= el.srcElement.scrollHeight

But how can I apply this and dynamically calculate my thumb position, to have it also reach the bottom properly?