Geek Answers Handbook

Calculate scrollbar height according to the amount of hidden content

I am creating a graphic scrollbar, so I need to calculate the height of the scrollbar manually. Do you know how in most applications the height of the scroll bar changes depending on how much scroll?

What is the formula for calculating the height of the scroll bar depending on the amount of hidden content? Is it logarithmic or exponential, or simply based on the percentage of the content, visible or hidden content?

These are my input variables:

  • Visible area - for example. 100 ppi
  • Content height - for example. 1000 pixels
  • Maximum scrollbar height - for example. 500 ppi

This is what I want to calculate:

  • Scroll bar height - for example. 50 ppi
+6
design user-interface scrollbar formula
source share
3 answers

This is usually a percentage.

eg. if the visible area is 99% of the total area, the scrollbar is 99% of the height.

Similarly, if visibility is 50% of the total area, the scroll bar is 50% of the height.

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

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

+7
source share

I would use procent. Therefore, if the visible area is 45% of the height of the content. The scrollbar height will be 45% of the maximum scrollbar height. That seems right for a start. Therefore, if you see the scroll bar at the top of the screen, you know that this is about twice as much content.

But I think you need some kind of lower restriction on how small a scrollbar can be on order for the user to click on it.

0
source share

I think the linear formula will work fine. Assuming the maximum height of the scrollbar matches the maximum height of the visible area, the pseudo-code will look 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
0
source share

More articles:


All Articles