mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
a18f4c8f81
* fix(components): input icon justify by flex * fix(components): time-range-picker hover icon justify * fix(style): fix input prefix affix button style
4.8 KiB
4.8 KiB
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 |