2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Scrollbar
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Scrollbar
2021-04-20 10:44:10 +08:00
Used to replace the browser's native scrollbar.
2021-10-27 23:17:13 +08:00
< style lang = "scss" scoped >
2021-09-17 00:18:50 +08:00
.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-button {
margin-bottom: 20px;
}
.el-slider {
margin-top: 20px;
}
}
< / style >
## Basic usage
2021-04-20 10:44:10 +08:00
:::demo Use `height` property to set the height of the scrollbar, or if not set, it adapts according to the parent container height.
2021-09-17 00:18:50 +08:00
scrollbar/basic-usage
2021-04-20 10:44:10 +08:00
:::
2021-09-17 00:18:50 +08:00
## Horizontal scroll
2021-04-20 10:44:10 +08:00
:::demo When the element width is greater than the scrollbar width, the horizontal scrollbar is displayed.
2021-09-17 00:18:50 +08:00
scrollbar/horizontal-scroll
2021-04-20 10:44:10 +08:00
:::
2021-09-17 00:18:50 +08:00
## Max height
2021-04-20 10:44:10 +08:00
:::demo The scrollbar is displayed only when the element height exceeds the max height.
2021-09-17 00:18:50 +08:00
scrollbar/max-height
2021-04-20 10:44:10 +08:00
:::
2021-09-17 00:18:50 +08:00
## Manual scroll
2021-07-05 09:10:50 +08:00
:::demo Use `setScrollTop` and `setScrollLeft` methods can control scrollbar manually.
2021-09-17 00:18:50 +08:00
scrollbar/manual-scroll
2021-07-05 09:10:50 +08:00
:::
2021-09-17 00:18:50 +08:00
## Scrollbar Attributes
2021-04-20 10:44:10 +08:00
2021-09-04 19:29:28 +08:00
| 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 |
2021-04-20 10:44:10 +08:00
2021-09-17 00:18:50 +08:00
## Scrollbar Events
2021-04-20 10:44:10 +08:00
2021-09-04 19:29:28 +08:00
| Event Name | Description | Parameters |
| ---------- | ----------------------- | ----------------------------------------------- |
| scroll | triggers when scrolling | distance of scrolling { scrollLeft, scrollTop } |
2021-07-05 09:10:50 +08:00
2021-09-17 00:18:50 +08:00
## Scrollbar Methods
2021-07-05 09:10:50 +08:00
2021-09-04 19:29:28 +08:00
| Method | Description | Parameters |
| ------------- | ------------------------------- | -------------------- |
| setScrollTop | Set distance to scroll top | (scrollTop: number) |
| setScrollLeft | Set distance to scroll left | (scrollLeft: number) |
| update | update scrollbar state manually | — |
2021-10-04 08:26:51 +08:00
## Scrollbar Slots
| Name | Description |
| ---- | ------------------------- |
| — | customize default content |
