scroll-thumb-minimum-size-notheme.html (1054B)
1 <!DOCTYPE html> 2 <div style="width: 200px; height: 200px; overflow: scroll;; -moz-appearance:none"> 3 <div style="width: 3725px; height: 3725px"></div> 4 </div> 5 <!-- 6 The size of the inner div is computed as follow: 7 8 Input: 9 outer_div_size: size of the div containing the scrollbar 10 button_size: size of the scrollbar arrow buttons 11 scrollbar_thickness: width/height of a vertical/horizontal scrollbar respectively 12 thumb_size: height/width of the thumb of a vertical/horizontal scrollbar respectively 13 Output: 14 inner_div_size: size of the div to be scrolled 15 16 Formula: 17 slider_size = outer_div_size - 2 * button_size - scrollbar_thickness 18 thumb_size = slider_size * (outer_div_size / inner_div_size) 19 which gives: 20 inner_div_size = (outer_div_size - 2 * button_size - scrollbar_thickness) * (outer_div_size / thumb_size) 21 22 Testcase constants: 23 outer_div_size = 200 24 25 On XP/Vista at 96 dpi with theme disabled: 26 thumb_size = 8 (minimum size) 27 button_size = 17 28 scrollbar_thickness = 17 29 30 inner_div_size = (200 - 2 * 17 - 17) * (200 / 8) = 3725 31 -->