mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
6593d815e6
* feat(components): [scrollbar] add `distance` prop * feat: update trigger end logic * refactor: code * refactor: reduce code * chore: update check * refactor: rename * Update docs/en-US/component/scrollbar.md
97 lines
7.4 KiB
Markdown
97 lines
7.4 KiB
Markdown
---
|
|
title: Scrollbar
|
|
lang: 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
|
|
|
|
:::
|
|
|
|
## Infinite scroll ^(2.10.0)
|
|
|
|
:::demo `end-reached` is triggered when the scrollbar reaches the end. It can be used as an infinite scroll.
|
|
|
|
scrollbar/infinite-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'` | — |
|
|
| tabindex ^(2.8.3) | tabindex of wrap container | ^[number] / ^[string] | — |
|
|
| distance ^(2.10.5) | trigger end-reached event distance(px) | ^[number] | 0 |
|
|
|
|
### Events
|
|
|
|
| Name | Description | Type |
|
|
| --------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
| scroll | triggers when scrolling, return distance of scrolling | ^[Function]`({ scrollLeft: number, scrollTop: number }) => void` |
|
|
| end-reached ^(2.10.0) | triggers when the end of a scroll is triggered | ^[Function]`(direction: 'top' \| 'bottom' \| 'left' \| 'right') => 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>` |
|