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.
Description
Plan minimum-edge scroll reveal deltas in axis-aligned coordinates, prioritizing the leading edge when an item exceeds viewport size; no DOM scrolling occurs.
Revealing a rectangle can require a separate scroll delta on each axis. Oversized items need a declared edge preference.
When to use this tool
Plan minimum-edge scroll reveal deltas in axis-aligned coordinates, prioritizing the leading edge when an item exceeds viewport size; no DOM scrolling occurs.
- Prepare the supplied rectangle, viewport 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 rectangle, viewport. 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.deltaX, result.deltaY. Interpret false, null and empty lists using the distinctions below; they can be valid outputs.
For each axis return item start minus viewport start if the leading edge is before view; otherwise return the trailing-edge excess if beyond view, else zero. Return deltaX/Y.1
| Input field | Meaning and representation | Accepted input |
|---|---|---|
| rectangle | rectangle. | List of finite numbers; bounded by the operation |
| viewport | viewport. | List of finite numbers; bounded by the operation |
| Output field | Interpretation |
|---|---|
| result | Object containing the named outputs below. |
| result.deltaX | The delta x value under the stated formula or text convention. |
| result.deltaY | The delta y value under the stated formula or text convention. |
{
"input": {
"rectangle": [
12,
0,
3,
3
],
"viewport": [
0,
0,
10,
10
]
},
"output": {
"result": {
"deltaX": 5,
"deltaY": 0
}
}
}Limitations and assumptions
- When an item exceeds both sides, the leading-edge branch wins. No actual scrolling, scroll clamping, nested container or browser alignment policy is applied.
- 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
- Layout Inset Content Rectangle
Compute axis-aligned inset content geometry, retaining an overconstrained flag when opposing insets exceed available size.
- Layout Rectangle Overlap Pairs
List unique unordered rectangle pairs with positive overlap area; edge touching, z-order and occlusion are not counted as area overlap.