Calculate scrollbar height according to amount of hidden contents

Question

I'm creating a graphical scrollbar so I need to calculate the scrollbar height manually. You know how in most applications the scrollbar height changes based on how much there is to scroll?

What is the formula for calculating the scrollbar height based on the amount of hidden contents? Is it logarithimic or exponential or just plainly based on the percentage of contents visible vs contents hidden?

These are my input variables:

• Visible area - eg. 100 px
• Content height - eg. 1000 px
• Max scrollbar height - eg. 500 px

This is what I want to calculate:

• Scrollbar height - eg. 50 px??

Answer 1

It is usually a percentage.

E.g. if the visible area is 99% of the full area, the scrollbar is 99% of the height.

Likewise if the visible is 50% of the full area, the scrollbar is 50% of the height.

Just be sure to make the minimum size something reasonable (e.g. at least 18-20px)

Thus if you have a visible height of 500px, and content of 50,000px even though it should make a thumb screw height of (1% of 500px = 5px)... use the default minimum instead (e.g. 20px)