Add CSS Custom Properties for CSS-Based Scrollbar Calculations

[ykadosh]

If possible, we should try to assign various CSS properties that can later be used for calculating the scroll track size and scroll thumb position using CSS only, instead of the current JS based implementation.

The ultimate goal is to be able to use CSS only for all the calculations.

I suggest adding the following:

• --csvr: The ratio between the client height and the scroll height (ClientScrollVerticalRatio)
• --cshr: The ratio between the client width and the scroll width (ClientScrollHorizontalRatio)

And on each scrollbar, the following:

• --scroll-top: For the vertical scrollbar
• --scroll-left: For the horizontal scrollbar

Then, we can calculate the thumb size and position like so:

height: max(calc((var(--csvr, 1) * 100%)), 30px); // 30px min size, can also be a variable

[udia76]

:tada: This issue has been resolved in version 1.5.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: