Layout

Scroll Fade

Indicate overflowing content with a fade.

Use ScrollFade when scrollable content should fade to indicate more content instead of showing a native scrollbar. When the browser does not support the fade, the native scrollbar remains visible. Read Layout to choose a layout component.

Scroll Fade: Basic

Open in playground

First itemSecond itemThird itemFourth item

import { Cluster } from '@luke-ui/react/cluster';
import { ScrollFade } from '@luke-ui/react/scroll-fade';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<ScrollFade aria-label="Example items" padding="space.12" style={{ inlineSize: '16rem' }}>
			<Cluster flexWrap="nowrap" gap="space.16">
				{['First item', 'Second item', 'Third item', 'Fourth item'].map((item) => (
					<Text key={item} style={{ flex: 'none' }}>
						{item}
					</Text>
				))}
			</Cluster>
		</ScrollFade>
	);
};

Scroll Fade: Basic

Loading Scroll Fade: Basic example

Block axis

Pass axis="block" to scroll on the block axis. The default axis="inline" scrolls on the inline axis. Both values follow the element's writing mode.

Scroll Fade: Block axis

Open in playground

First itemSecond itemThird itemFourth itemFifth itemSixth item

import { ScrollFade } from '@luke-ui/react/scroll-fade';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<ScrollFade
			aria-label="Example items"
			axis="block"
			padding="space.12"
			style={{ blockSize: '8.75rem', inlineSize: '20rem' }}
		>
			<Stack gap="space.12">
				{['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item', 'Sixth item'].map(
					(item) => (
						<Text key={item}>{item}</Text>
					),
				)}
			</Stack>
		</ScrollFade>
	);
};

Scroll Fade: Block axis

Loading Scroll Fade: Block axis example

Accessibility

Pass exactly one of aria-label or aria-labelledby.

When content overflows, ScrollFade becomes a focusable, named region with a focus-visible treatment.

When the content fits, ScrollFade has no region role, accessible-name attribute, or extra tab stop.

ScrollFade always renders a div. Compose semantic structure around or inside it.

API

ScrollFadeProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
alignSelf	<"auto" \|⁠ "baseline" \|⁠ "center" \|⁠ "flex-end" \|⁠ "flex-start" \|⁠ "normal" \|⁠ "stretch"> \|⁠ undefined	—
axis		`inline`
Logical axis to scroll on and fade at while more content is available.
blockSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
borderBlockEndWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderBlockStartWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderInlineEndWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderInlineStartWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
flexBasis	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "content" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
flexGrow	<"0" \|⁠ "1"> \|⁠ undefined	—
flexShrink	<"0" \|⁠ "1"> \|⁠ undefined	—
inlineSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
inset	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlock	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlockEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlockStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInline	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInlineEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInlineStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
justifySelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	—
margin	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlock	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlockEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlockStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInline	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInlineEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInlineStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
maxBlockSize	<"0" \|⁠ "100%" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content" \|⁠ "none"> \|⁠ undefined	—
maxInlineSize	<"0" \|⁠ "100%" \|⁠ "container.448" \|⁠ "container.672" \|⁠ "container.896" \|⁠ "container.1152" \|⁠ "container.1280" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content" \|⁠ "none"> \|⁠ undefined	—
minBlockSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
minInlineSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
order	<number> \|⁠ undefined	—
overscrollBehavior	<"auto" \|⁠ "contain"> \|⁠ undefined	—
padding	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlock	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlockEnd	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlockStart	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInline	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInlineEnd	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInlineStart	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
placeSelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	—
position	<"absolute" \|⁠ "fixed" \|⁠ "relative" \|⁠ "static" \|⁠ "sticky"> \|⁠ undefined	—