{"id":16653,"date":"2009-09-21T10:00:00","date_gmt":"2009-09-21T10:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/2009\/09\/21\/what-is-the-logic-behind-the-thumb-size-and-position-calculation-in-scroll-bars\/"},"modified":"2009-09-21T10:00:00","modified_gmt":"2009-09-21T10:00:00","slug":"what-is-the-logic-behind-the-thumb-size-and-position-calculation-in-scroll-bars","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20090921-00\/?p=16653","title":{"rendered":"What is the logic behind the thumb size and position calculation in scroll bars?"},"content":{"rendered":"<p>Commenter <a href=\"http:\/\/sarathc.wordpress.com\/\">sarathc<\/a> asks, &#8220;How do we implement a custom scroll bar as Windows does? <a href=\"http:\/\/blogs.msdn.com\/oldnewthing\/pages\/407234.aspx#655245\"> What is the logic behind the thumb size and position calculation<\/a>? How we could dynamically manage it?&#8221;\n Let&#8217;s look at the three questions in turn.\n To implement a custom scroll bar&#8230; don&#8217;t do it. It&#8217;s just not worth the effort, and there will almost always be little seams, like <a href=\"http:\/\/blogs.msdn.com\/oldnewthing\/archive\/2005\/02\/11\/371042.aspx\"> not lighting up when the mouse hovers over them<\/a>.\n The logic behind the thumb size and position calculation I thought I covered <a href=\"http:\/\/blogs.msdn.com\/oldnewthing\/archive\/2003\/07\/31\/54601.aspx\"> in my scroll bar series<\/a>. 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:<\/p>\n<blockquote class=\"m\"><p> thumb size \/ scroll bar size = page size \/ scroll bar range <\/p><\/blockquote>\n<p> A little high school algebra tells you, then, that<\/p>\n<blockquote class=\"m\"><p> thumb size = scroll bar size * page size \/ scroll bar range <\/p><\/blockquote>\n<p> There may be some off-by-one errors in the above formula, and some special tweaks for extreme cases (you don&#8217;t want a thumb smaller than one pixel after all), but that&#8217;s the basic idea.\n 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).<\/p>\n<p> To dynamically manage it, use the usual scroll bar functions like <code>SetScrollInfo<\/code>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Commenter sarathc asks, &#8220;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?&#8221; Let&#8217;s look at the three questions in turn. To implement a custom scroll bar&#8230; don&#8217;t do it. It&#8217;s just not worth the effort, and [&hellip;]<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-16653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"<p>Commenter sarathc asks, &#8220;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?&#8221; Let&#8217;s look at the three questions in turn. To implement a custom scroll bar&#8230; don&#8217;t do it. It&#8217;s just not worth the effort, and [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/16653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=16653"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/16653\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=16653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=16653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=16653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}