element-plus/website/docs/en-US/scrollbar.md
三咲智子 55348b30b6
style: use prettier (#3228)
* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console
2021-09-04 19:29:28 +08:00

145 lines
5.2 KiB
Markdown

## 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.
```html
<template>
<el-scrollbar height="400px">
<p class="item" v-for="item in 20">{{ item }}</p>
</el-scrollbar>
</template>
```
:::
### Horizontal scroll
:::demo When the element width is greater than the scrollbar width, the horizontal scrollbar is displayed.
```html
<template>
<el-scrollbar>
<div class="flex-content">
<p class="item" v-for="item in 50">{{ item }}</p>
</div>
</el-scrollbar>
</template>
```
:::
### Max height
:::demo The scrollbar is displayed only when the element height exceeds the max height.
```html
<template>
<el-button @click="add">Add Item</el-button>
<el-button @click="delete">Delete Item</el-button>
<el-scrollbar max-height="400px">
<p class="item" v-for="item in count">{{ item }}</p>
</el-scrollbar>
</template>
<script>
export default {
data() {
return {
count: 3,
}
},
methods: {
add() {
this.count++
},
delete() {
if (this.count > 0) {
this.count--
}
},
},
}
</script>
```
:::
### Manual scroll
:::demo Use `setScrollTop` and `setScrollLeft` methods can control scrollbar manually.
```html
<template>
<el-scrollbar ref="scrollbar" height="400px" always>
<div ref="inner">
<p class="item" v-for="item in 20">{{ item }}</p>
</div>
</el-scrollbar>
<el-slider
v-model="value"
@input="inputSlider"
:max="max"
:format-tooltip="formatTooltip"
></el-slider>
</template>
<script>
export default {
data() {
return {
max: 0,
value: 0,
}
},
mounted() {
this.max = this.$refs.inner.clientHeight - 380
},
methods: {
inputSlider(value) {
this.$refs.scrollbar.setScrollTop(value)
},
formatTooltip(value) {
return `${value} px`
},
},
}
</script>
```
:::
### 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 | — |