Scroll Thumb Position

Map scroll position to thumb travel with explicit sizes and scroll range; non-scrollable content maps to zero.

Description

Map scroll position to thumb travel with explicit sizes and scroll range; non-scrollable content maps to zero.

A scrollbar thumb moves across the track space left after its own length is removed.

When to use this tool

Map scroll position to thumb travel with explicit sizes and scroll range; non-scrollable content maps to zero.

  • Prepare the supplied scrollPosition, maximumScroll, trackExtent, thumbExtent 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

  1. Enter scrollPosition, maximumScroll, trackExtent, thumbExtent. Use the exact text syntax, units and index conventions explained below.
  2. Run the tool. If input validation fails, correct the supplied fields before interpreting any result.
  3. Read result.thumbStart. Interpret false, null and empty lists using the distinctions below; they can be valid outputs.

Require scrollPosition within [0,maximumScroll] and thumbExtent within [0,trackExtent]. Return progress times trackExtent-thumbExtent, or zero when maximumScroll is zero.1

Input fieldMeaning and representationAccepted input
scrollPositionscroll position.Finite number
maximumScrollmaximum scroll.Finite number; zero or greater
trackExtenttrack extent.Finite number; zero or greater
thumbExtentthumb extent.Finite number
Output fieldInterpretation
resultObject containing the named outputs below.
result.thumbStartThe thumb start value under the stated formula or text convention.
json
{
  "input": {
    "scrollPosition": 25,
    "maximumScroll": 100,
    "trackExtent": 80,
    "thumbExtent": 40
  },
  "output": {
    "result": {
      "thumbStart": 10
    }
  }
}

Limitations and assumptions

  • This computes a custom control geometry, not native browser scrollbar dimensions or RTL behavior.
  • 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

  1. Tool behavior and example: Scroll Thumb Position — tool.io

Similar or alternative tools

  • Scroll Position after Item Resize

    Adjust scroll position only when a resized item is independently established before the anchor; retain signed extent change and do not infer overlapping-anchor behavior.

  • Scroll Position after Prepend

    Preserve an existing scroll anchor after a known prepended extent, before any independently required scroll-range clamp.

Don't forget to set a bookmark for tool.io!
Privacy | Imprint | Cookies