Source code

Revision control

Other Tools

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
-->