useScrollRect

Returns the scroll-adjusted position of the component, before sticky clamping. For non-sticky nodes this equals useScreenRect. For sticky nodes (position="sticky"), the scroll-rect reflects where the node would be without sticky adjustment — so it can go off-screen (negative y, etc.) when scrolled past.

Like useBoxRect, this hook returns the committed rect: the value as of the most recent event-batch commit boundary, invariant across every convergence pass within a batch.

Import

import { useScrollRect } from "silvery"

Usage

function Card({ id }: { id: string }) {
  const { y } = useScrollRect()
  return <Box>Scroll y: {y}</Box>
}

Signature

function useScrollRect(): Rect

Same shape as useBoxRect: { width, height, x, y }.

When to use

• Cross-component visual navigation that needs the natural (pre-clamp) position.
• Building scroll-aware UI such as "active section" highlighting in a long-scrolling list, where you want the element's position in scroll coordinates regardless of sticky behavior.

For the actual paint position on the terminal screen (sticky-clamped), use useScreenRect. For responsive sizing inside a component, use useBoxRect.

See also

• useBoxRect — layout position (border-box minus padding/border)
• useScreenRect — actual paint position on the terminal screen
• useResponsiveBoxProps — declarative responsive layout