September 21st, 2009

What is the logic behind the thumb size and position calculation in scroll bars?

Commenter sarathc asks, “How do we implement a custom scroll bar as Windows does? What is the logic behind the thumb size and position calculation? How we could dynamically manage it?” Let’s look at the three questions in turn. To implement a custom scroll bar… don’t do it. It’s just not worth the effort, and there will almost always be little seams, like not lighting up when the mouse hovers over them. The logic behind the thumb size and position calculation I thought I covered in my scroll bar series. The size of the thumb relative to the size of the scroll bar is the same as the page size relative to the scroll bar range. In other words:

thumb size / scroll bar size = page size / scroll bar range

A little high school algebra tells you, then, that

thumb size = scroll bar size * page size / scroll bar range

There may be some off-by-one errors in the above formula, and some special tweaks for extreme cases (you don’t want a thumb smaller than one pixel after all), but that’s the basic idea. Similarly, the screen position of the thumb relative to the scroll bar is equal to the programmatic thumb position relative to the scroll bar range (roughly).

To dynamically manage it, use the usual scroll bar functions like SetScrollInfo.

Topics
Code

Author

Raymond has been involved in the evolution of Windows for more than 30 years. In 2003, he began a Web site known as The Old New Thing which has grown in popularity far beyond his wildest imagination, a development which still gives him the heebie-jeebies. The Web site spawned a book, coincidentally also titled The Old New Thing (Addison Wesley 2007). He occasionally appears on the Windows Dev Docs Twitter account to tell stories which convey no useful information.

0 comments

Discussion are closed.