Scroll Thumb Size
Compute proportional scrollbar thumb size with an explicit minimum and track cap; no CSS or platform scrollbar rendering.
Description
Compute proportional scrollbar thumb size with an explicit minimum and track cap; no CSS or platform scrollbar rendering.
A proportional scrollbar thumb can be bounded by a minimum size and the total track length.
When to use this tool
Compute proportional scrollbar thumb size with an explicit minimum and track cap; no CSS or platform scrollbar rendering.
- Prepare the supplied contentExtent, viewportExtent, trackExtent, minimumThumb fields for this operation.
- Compare the complete example with the representation used by your own input before carrying the result into another step.
How to use the tool and how it works
- Enter contentExtent, viewportExtent, trackExtent, minimumThumb. Use the exact text syntax, units and index conventions explained below.
- Run the tool. If input validation fails, correct the supplied fields before interpreting any result.
- Read result.thumbExtent. Interpret false, null and empty lists using the distinctions below; they can be valid outputs.
Require positive content/track extents, nonnegative viewport extent and minimumThumb within the track. Compute track*viewport/content, raise to the minimum and clamp to track.1
| Input field | Meaning and representation | Accepted input |
|---|---|---|
| contentExtent | content extent. | Finite number; greater than zero |
| viewportExtent | viewport extent. | Finite number; zero or greater |
| trackExtent | track extent. | Finite number; greater than zero |
| minimumThumb | minimum thumb. | Finite number |
| Output field | Interpretation |
|---|---|
| result | Object containing the named outputs below. |
| result.thumbExtent | The thumb extent value under the stated formula or text convention. |
{
"input": {
"contentExtent": 200,
"viewportExtent": 100,
"trackExtent": 80,
"minimumThumb": 10
},
"output": {
"result": {
"thumbExtent": 40
}
}
}Limitations and assumptions
- The viewport may exceed content, producing a full track thumb. No native scrollbar style, input handling or DOM measurement is included.
- Rectangle arrays use [x,y,width,height] with nonnegative extents. All dimensions must use the same coordinate frame and unit; values are supplied rather than measured from a page.
- Every declared top-level field is required and unexpected fields are rejected. Numeric inputs must be finite; ordinary text fields are bounded to 8,192 UTF-16 code units, with tighter operation-specific limits where stated.
- String lists have at most 128 entries of at most 128 code units; matrices have at most 128 rows and columns. Larger numeric lists and parsed JSON have separate bounded budgets. Nonfinite results and excessively large serialized outputs are rejected.
- Indexes are zero-based and spans have an exclusive end unless explicitly stated otherwise. A valid false, null or empty-list result is distinct from malformed input.
Alternative or Complementary methods
Measure the actual layout when browser behavior matters. The formulas use supplied coordinates and explicit simplifications; they do not account for every box, writing mode, clipping ancestor or simultaneous layout change.
References
Similar or alternative tools
- Scroll Thumb Position
Map scroll position to thumb travel with explicit sizes and scroll range; non-scrollable content maps to zero.
- Rectangle Scroll Reveal Delta
Plan minimum-edge scroll reveal deltas in axis-aligned coordinates, prioritizing the leading edge when an item exceeds viewport size; no DOM scrolling occurs.