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