6

Given the illustration below:

enter image description here

Find the content step value proportional to the thumb height and thumb step.

content step is the amount of scroll in pixel through vertical position.

What could be the formula here?

2 Answers 2

6

Formula for calculating the thumb height

var arrowHeight = 25;
var viewportHeight = 200;
var contentHeight = 600;

var viewableRatio = viewportHeight / contentHeight; // 1/3 or 0.333333333n
var scrollBarArea = viewportHeight - arrowHeight * 2; // 150px
var thumbHeight = scrollBarArea * viewableRatio; // 50px

Formula for calculating the content step of scroller

var scrollTrackSpace = self.contentHeight - self.viewportHeight; // (600 - 200) = 400 
var scrollThumbSpace =  self.viewportHeight - self.thumbHeight; // (200 - 50) = 150
var scrollJump = scrollTrackSpace / scrollThumbSpace; //  (400 / 150 ) = 2.666666666666667

Finally:-

Thumb Height = 50px;

Thumb Step Down = 1px;

Content Scroll Up = 2.666666666666667px;

If you jump down 1 pixel thumb then your content should scroll 2.666666666666667 pixel up.

For complete details please refere this thread :-Complete Scrolling Formula

4
  • Glad someone dig into this almost buried post of mine that nobody pays attention to. I leave this GUI project for a while because I'm stuck in this problem and I cannot find a website that discusses this kind of topic, however I'm doing a webdev in this past month and I learn a lot about their UIs, hopefully I get back into the excitement again after that. Thank you for answering :D ..Maybe I will continue this project after I settle my focus again.
    – mr5
    Mar 28, 2014 at 14:27
  • Thanks you very much for your appreciation!! Please let me know you may required any help in future.
    – imdadhusen
    Mar 31, 2014 at 8:08
  • trying to follow this, what is arrowHeight? Jul 26, 2018 at 6:44
  • arrowHeight is a place where user can scroll up or down by clicking on Top and Bottom arrow of scrollbar. This would be applicable only for Desktop browsers, because in Mobile devices we don't have icon to scroll up or down....
    – imdadhusen
    Jan 31, 2022 at 10:16
0

I tried using the formulae you provided in VB.net, but it isn't working. The thumb stops short of the end of the scrollbar. The scrollbar and viewable area are both 490px, and the content height is the amount of content items (ChAm) multiplied by 50 plus 40.

 Dim contentHeight As Integer = ChAm * 50 + 40
 Dim scrollBarArea As Integer = 490
 Dim viewableRatio As Double = scrollBarArea / contentHeight
 Dim thumbHeight As Double = scrollBarArea * viewableRatio
 Dim scrollTrackSpace As Integer = contentHeight - scrollBarArea
 Dim scrollThumbSpace As Double = scrollBarArea - thumbHeight
 Dim scrollJump As Double = scrollTrackSpace / scrollThumbSpace

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.