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)

Answer 2

I would use procent. So if visible area is 45% of Content height. The scrollbar height would be 45% of Max scrollbar height. This feels right for the start. So if you see the scrollbar in the top you know that the is around double more content.

But I think you need some lower limit on how small the scrollbar can be on order for the User to click on it.

Answer 3

I think that linear formula will do just fine. Supposing that max scrollbar height is the same as max visible area height, the pseudocode would be like this:

scrollbar_visible=true;
if (content_height < visible_height) {scrollbar_visible = false; return;} // hide the scrollbar if there'se nothing to scroll
scrollbar_height = visible_height/content_height;
scrollbar_height = min(scrollbar_height, min_scrollbar_height); // don't let the scrollbar become smaller than some predefined size