New to KendoReact? Start a free 30-day trial

ScrollViewProps

Interface

Represents the props of the KendoReact ScrollView component.

Definition

Package:@progress/kendo-react-scrollview

Properties

activeView?

number

Represents the current active view (see example). Defaults to 1.

Default:

Example:

jsx

<ScrollView activeView={2} />

arrows?

boolean

Enables or disables the built-in navigation arrows (see example). Defaults to true.

Default:

true

Example:

jsx

<ScrollView arrows={false} />

automaticViewChange?

boolean

Allows the ScrollView to switch the next page automatically after a short delay (see example). Defaults to true.

Default:

true

Example:

jsx

<ScrollView automaticViewChange={false} />

automaticViewChangeInterval?

number

Defines the automatic page change delay in milliseconds (see example). Defaults to 5000.

Default:

5000

Example:

jsx

<ScrollView automaticViewChangeInterval={3000} />

children?

ReactNode

Sets the ScrollView children elements.

Example:

jsx

<ScrollView>
  <div>Page 1</div>
  <div>Page 2</div>
</ScrollView>

className?

string

Specifies a list of CSS classes that will be added to the ScrollView.

Example:

jsx

<ScrollView className="custom-scrollview" />

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

Example:

jsx

<ScrollView dir="rtl" />

endless?

boolean

Toggles the endless scrolling mode in which the data items are endlessly looped (see example). Defaults to false.

Default:

false

Example:

jsx

<ScrollView endless={true} />

pageable?

boolean

Toggles the built-in pager (see example). Defaults to true.

Default:

true

Example:

jsx

<ScrollView pageable={false} />

pagerOverlay?

"dark" | "light" | "none"

Sets the pager overlay (see example).

The possible values are:

none(Default) — No overlay is set.
dark — Dark overlay is set.
light — Light overlay is set.

Example:

jsx

<ScrollView pagerOverlay="dark" />

style?

CSSProperties

Sets additional CSS styles to the ScrollView.

Example:

jsx

<ScrollView style={{ width: '100%' }} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.