Description

Features

• Traps scrolling occurring on the underlying elements, preventing page scrolling when used in combination with a Sheet component for example.
• Preserves the visual position of the underlying HTML element when it is a descendant of <Sheet.Outlet /> or <SheetStack.Outlet /> underlying HTML elements and those have their transform CSS property animated during a travel or stacking animation.
• Exposes --x-collapsed-scrollbar-thickness and --y-collapsed-scrollbar-thickness CSS custom properties when page scrolling is temporarily disabled, allowing to adjust the position of the underlying HTML elements and descendant HTML elements to avoid visual position changes caused by the removal of the page scrollbars.

Notes

• <Sheet.View /> is internally wrapped inside of a Fixed component, so you can use it in the same way without having to wrap it yourself.

Structure

Basic

import { Fixed } from "@silk-hq/sheet";

export default () => (
	<Fixed.Root>
		<Fixed.Content>
			...
		</Fixed.Content>
	</Fixed.Root>
);

With <Sheet.Outlet />

import { Sheet, Fixed } from "@silk-hq/sheet";

export default () => (
	<Sheet.Outlet>
		<Fixed.Root>
			<Fixed.Content>
				...
			</Fixed.Content>
		</Fixed.Root>
	</Sheet.Outlet>
);

Sub-components

<Fixed.Root />

Description

The root sub-component of the Fixed component.