scroll-behavior Smooth Duration Heuristic
Explicit caller smooth-scroll distance/speed/clamp heuristic, not CSS specification or browser smooth-scroll timing guarantee. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
A distance-based scrolling duration is an author-selected heuristic.
A distance-based scrolling duration is an author-selected heuristic.1
It does not reproduce a browser's native smooth-scrolling timing algorithm. Use scroll-behavior Smooth Duration Heuristic to evaluate the supplied inputs under the specific model below.
When to use scroll-behavior Smooth Duration Heuristic
Use scroll-behavior Smooth Duration Heuristic to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use scroll-behavior Smooth Duration Heuristic and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Observed distance px, Caller pixels per second, Caller min duration seconds, Caller max duration seconds using the field table and validation rules below, then run the tool.
- Read Caller heuristic duration seconds and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| observedDistancePx | Observed distance px | number | Required; constraints below |
| callerPixelsPerSecond | Caller pixels per second | number | Required; constraints below |
| callerMinDurationSeconds | Caller min duration seconds | number | Required; constraints below |
| callerMaxDurationSeconds | Caller max duration seconds | number | Required; constraints below |
Enter nonnegative distance in px, positive speed in px/s and ordered nonnegative minimum and maximum durations in seconds. Divide distance by speed and clamp the result to those limits. This is a caller-defined heuristic, not the duration selected by a browser's smooth-scroll implementation.
durationSeconds = min(maximumSeconds,max(minimumSeconds,distancePx/speedPxPerSeconds)) Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| callerHeuristicDurationSeconds | Caller heuristic duration seconds | number |
{
"input": {
"observedDistancePx": 1000,
"callerPixelsPerSecond": 2000,
"callerMinDurationSeconds": 0.1,
"callerMaxDurationSeconds": 1
},
"output": {
"callerHeuristicDurationSeconds": 0.5
}
}Limitations and assumptions
It does not reproduce a browser's native smooth-scrolling timing algorithm. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use scroll-snap-align Types Lookup for a related task: Scroll snapping aligns a snap area with a snapport along a chosen axis.
Use overscroll-behavior Scroll-Chaining Stop for a related task: Overscroll behavior concerns scroll chaining and boundary effects.
References
Similar or alternative tools
- scroll-snap-align Types Lookup
Scroll snapping aligns a snap area with a snapport along a chosen axis.
- overscroll-behavior Scroll-Chaining Stop
Overscroll behavior concerns scroll chaining and boundary effects.