Scroll Distance Ratio Range Calculator

Calculate a practical single-scroll distance range as pixels, ratios, and percentages of viewport height. This is useful when you need to tune automated scrolling, exposure checks, or page-depth simulations so target elements can become visible within a planned number of scroll actions.

Scroll distance ratio calculator

Viewport height

Page height

Target element height

Required visible ratio

Minimum scroll count

Maximum scroll count

Targets

Enter one target per line. Format: top, optional exposureRate.

Minimum ratio

34.12%

Maximum ratio

68.24%

Minimum distance

318.00

Maximum distance

636.00

Top	Exposure rate	Threshold
200	1	0.00
1200	0.8	492.00
2700	0.5	1908.00

Output

{
  "minDistance": 318,
  "maxDistance": 636,
  "minRatio": 0.34120171673819744,
  "maxRatio": 0.6824034334763949,
  "minPercent": "34.12%",
  "maxPercent": "68.24%",
  "thresholds": [
    {
      "top": 200,
      "exposureRate": 1,
      "threshold": 0
    },
    {
      "top": 1200,
      "exposureRate": 0.8,
      "threshold": 492
    },
    {
      "top": 2700,
      "exposureRate": 0.5,
      "threshold": 1908
    }
  ]
}

How to use this tool

Enter the viewport height, total page height, target element height, required visible ratio, and the expected minimum and maximum number of scroll actions. Then enter target element top positions, one per line, with an optional exposure rate after a comma to override that target's visible ratio.

The tool computes each target threshold, finds the deepest threshold, and returns the minimum and maximum single-scroll distance from that target exposure threshold. Percent values are based on viewport height so they can be reused in scroll automation or configuration values.

Example

With a 932px viewport, 3000px page, 280px target height, 50% visible ratio, 3 to 6 scroll actions, and target tops at 200, 1200, and 2700, the calculator returns the percentage range needed for one scroll step.

Frequently asked questions

What does the percentage mean?

The percentage is the recommended single-scroll distance divided by viewport height. For example, 50% means scrolling by half of the current viewport height.

Why do I need a scroll count range?

The minimum distance uses the deepest target threshold divided by the maximum scroll count. The maximum distance uses the deepest target threshold divided by the minimum scroll count.

What is the target threshold?

It is the scrollTop value at which the configured portion of a target element can be exposed in the viewport, clamped to the page's scrollable range.

Privacy note

Your input is processed locally in your browser and is not uploaded to our server.