Description

In addition to providing additional features compared to plain CSS scroll containers, the Scroll component contains performance optimizations for the Sheet component animations when it is either containing Scroll components, or being wrapped into one. Therefore, we recommend using the Scroll component for all your scrolling needs across your web app or website.

Structure

Basic

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

export default () => (
	<Scroll.Root>
		<Scroll.View>
			<Scroll.Content>
				...
			</Scroll.Content>
		</Scroll.View>
		
		<Scroll.Trigger />
	</Scroll.Root>
);

Sub-components

`<Scroll.Root />`

Required	yes
Underlying HTML element	`div`
Requirements	Must contain all Scroll sub-components on the same instance

Description

The root sub-component of the Scroll component.

asChild

Required	no
Value type	`boolean`
Default value	`undefined`

Values description

`true`	The underlying HTML element rendered is the child.
`false	undefined`

Description

Defines whether the sub-component underlying HTML element is the default one or the one passed as child of the sub-component.