Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the Scrollbar Thumb size

I am attempting to work out the algorithm associated with sizing of the WPF Scrollbar thumb element.

The thumb element can be sized using the Scrollbar.ViewportSize property, but it in turn is related to the Scrollbar.Minimum and Scrollbar.Maximum values.

What I have discovered so far is:

For a Minimum and Maximum of 0 and 10, a ViewportSize of:

0 - Thumb minimum size
5 - Thumb approximately 25% of the available track
10 - Thumb approximately 50% of the available track
100 - Thumb approximately 75% of the available track
1000 - Thumb approximately 90% of the available track
10000 - Thumb fills the available track.

[note: these figures are only from my rough trial and error!]

Ideally I'd like to be able to have an algorithm where given the minimum and maximum values for the Scrollbar I can set the thumb size to be exactly x% of the available track.

Can anyone help with this?

Thanks.

like image 843
Ash Avatar asked Jun 25 '10 07:06

Ash


People also ask

What is thumb in scrollbar?

a box or “thumb” within a scrollbar that allows the user to move to a specific region by dragging the box to the appropriate location within the scrollbar. Also called a “scrollbox” or “elevator”.

How do I change the scrollbar size in CSS?

The scrollbar-width property is used to set the width or thickness of an element's scrollbar when shown. This property can be used on pages where the user interface requires the element to be displayed more prominently and shrinking the scrollbar width gives more space to the element.

How do I style a scrollbar in CSS?

Scrollbar Selectors For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.


1 Answers

From: http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.track(VS.90).aspx

thumbSize = (viewportSize/(maximum–minimum+viewportSize))×trackLength

or re-arranging for viewportSize:

viewportSize = thumbSize×(maximum-minimum)/(trackLength-thumbSize)

You've prob found this already but thought I'd post in case others end up here.

like image 199
Gavin S Avatar answered Oct 30 '22 06:10

Gavin S