Scrollable

Importing

import { Scrollable } from '@customerio/pluma-components/react';

Usage

The Scrollable component provides a scrollable container with configurable overflow behavior and edge detection capabilities. It's useful for creating scrollable areas that need to respond when content reaches the edges.

Overflow Direction

The overflow prop controls which direction the content can scroll:

• 'x': Horizontal scrolling only
• 'y': Vertical scrolling only
• 'both': Both horizontal and vertical scrolling
• 'hidden': No scrolling, content is clipped

Edge Detection

The Scrollable component provides callbacks that fire when content touches or leaves any edge (top, right, bottom, left):

• onTouchEdge: Called when content touches an edge
• onLeaveEdge: Called when content leaves an edge

These callbacks are useful for implementing custom scroll behaviors, UI indicators, and infinite scrolling.

Edge Threshold

You can configure how close to an edge the content needs to be to trigger the callbacks using the edgeThreshold prop. This value represents the distance in pixels from the edge:

Edge Indicators

The withEdgeIndicators prop enables visual fade effects at the edges to indicate when more content is available for scrolling. It uses CSS mask-image to fade the actual content pixels at scroll edges, creating a clean visual cue without z-index issues or overlaying gradients.

When Edge Indicators Appear

Edge indicators are shown when:

• withEdgeIndicators is true
• Content is scrollable in that direction
• The scroll position is not at the edge (based on edgeThreshold)
• Only works with single-direction overflow ('x' or 'y', not 'both')