element-plus/docs/en-US/component/scrollbar.md

title, lang

title	lang
Scrollbar	en-US

Scrollbar

Used to replace the browser's native scrollbar.

<style lang="scss"> .example-showcase { .el-scrollbar { .scrollbar-demo-item { display: flex; align-items: center; justify-content: center; height: 50px; margin: 10px; text-align: center; border-radius: 4px; background: var(--el-color-primary-light-9); color: var(--el-color-primary); } .flex-content { display: flex; .scrollbar-demo-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 100px; height: 50px; margin: 10px; text-align: center; border-radius: 4px; background: var(--el-color-danger-lighter); color: var(--el-color-danger); } } } .el-slider { margin-top: 20px; } } </style>

Basic usage

:::demo Use height property to set the height of the scrollbar, or if not set, it adapts according to the parent container height.

scrollbar/basic-usage

:::

Horizontal scroll

:::demo When the element width is greater than the scrollbar width, the horizontal scrollbar is displayed.

scrollbar/horizontal-scroll

:::

Max height

:::demo The scrollbar is displayed only when the element height exceeds the max height.

scrollbar/max-height

:::

Manual scroll

:::demo Use setScrollTop and setScrollLeft methods can control scrollbar manually.

scrollbar/manual-scroll

:::

Scrollbar Attributes

Attribute	Description	Type	Accepted Values	Default
height	height of scrollbar	string / number	—	—
max-height	max height of scrollbar	string / number	—	—
native	whether to use the native scrollbar style	boolean	—	false
wrap-style	style of warp container	string	—	—
wrap-class	class of warp container	string	—	—
view-style	style of view	string	—	—
view-class	class of view	string	—	—
noresize	do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance	boolean	—	false
tag	element tag of the view	string	—	div
always	always show scrollbar	boolean	—	false
min-size	minimum size of scrollbar	number	—	20

Scrollbar Events

Event Name	Description	Parameters
scroll	triggers when scrolling	distance of scrolling { scrollLeft, scrollTop }

Scrollbar Methods

Method	Description	Parameters
setScrollTop	Set distance to scroll top	(scrollTop: number)
setScrollLeft	Set distance to scroll left	(scrollLeft: number)
update	update scrollbar state manually	—

Scrollbar Slots

Name	Description
—	customize default content