mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 04:37:47 +08:00
ca8846c532
* feat: accessibility enhancement * fix: adjusting the attributes of Scrollbar * Update docs/en-US/component/scrollbar.md Co-authored-by: btea <2356281422@qq.com> * docs: updata * fix(components): [select] aria-selected error --------- Co-authored-by: btea <2356281422@qq.com>
6.5 KiB
6.5 KiB
| title | lang |
|---|---|
| Scrollbar | en-US |
Scrollbar
Used to replace the browser's native scrollbar.
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
:::
API
Attributes
| Name | Description | Type | 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 wrap container | ^[string] / ^[object]CSSProperties | CSSProperties[] | string[] |
— |
| wrap-class | class of wrap container | ^[string] | — |
| view-style | style of view | ^[string] / ^[object]CSSProperties | CSSProperties[] | 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 |
| id ^(2.4.0) | id of view | ^[string] | — |
| role ^(2.4.0) ^(a11y) | role of view | ^[string] | — |
| aria-label ^(2.4.0) ^(a11y) | aria-label of view | ^[string] | — |
| aria-orientation ^(2.4.0) ^(a11y) | aria-orientation of view | ^[enum]'horizontal' | 'vertical' |
— |
Events
| Name | Description | Type |
|---|---|---|
| scroll | triggers when scrolling, return distance of scrolling | ^[Function]({ scrollLeft: number, scrollTop: number }) => void |
Slots
| Name | Description |
|---|---|
| default | customize default content |
Exposes
| Name | Description | Type |
|---|---|---|
| handleScroll | handle scroll event | ^[Function]() => void |
| scrollTo | scrolls to a particular set of coordinates | ^[Function](options: ScrollToOptions | number, yCoord?: number) => void |
| setScrollTop | Set distance to scroll top | ^[Function](scrollTop: number) => void |
| setScrollLeft | Set distance to scroll left | ^[Function](scrollLeft: number) => void |
| update | update scrollbar state manually | ^[Function]() => void |
| wrapRef | scrollbar wrap ref | ^[object]Ref<HTMLDivElement> |