Tu View PlusScrollbar
Used to replace the browser's native scrollbar.
Basic usage
Use height property to set the height of the scrollbar, or if not set, it adapts according to the parent container height.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<tu-scrollbar height="260px">
<div class="demo-scrollbar-item" v-for="item in 20" :key="item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style><template>
<tu-scrollbar height="260px">
<div class="demo-scrollbar-item" v-for="item in 20" :key="item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style>Horizontal scroll
When the element width is greater than the scrollbar width, the horizontal scrollbar is displayed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
<tu-scrollbar>
<div class="demo-scrollbar-content">
<div v-for="item in 50" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-content {
display: flex;
}
.demo-scrollbar-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style><template>
<tu-scrollbar>
<div class="demo-scrollbar-content">
<div v-for="item in 50" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-content {
display: flex;
}
.demo-scrollbar-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style>Max height
The scrollbar is displayed only when the element height exceeds the max height.
1
2
3
<template>
<tu-button @click="remove">Delete Item</tu-button>
<tu-button @click="add">Add Item</tu-button>
<tu-scrollbar max-height="260px">
<div v-for="item in count" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const count = ref(3);
const add = () => {
count.value++;
};
const remove = () => {
if (count.value > 0) count.value--;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style><template>
<tu-button @click="remove">Delete Item</tu-button>
<tu-button @click="add">Add Item</tu-button>
<tu-scrollbar max-height="260px">
<div v-for="item in count" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const count = ref(3);
const add = () => {
count.value++;
};
const remove = () => {
if (count.value > 0) count.value--;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style>Manual scroll
The scrollbar is displayed only when the element height exceeds the max height.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<tu-slider
class="demo-slider"
v-model="value"
:max="max"
@change="handleSliderChange"
/>
<tu-scrollbar ref="scrollbarRef" height="260px" always @scroll="scroll">
<div ref="innerRef">
<div v-for="item in 20" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { TuScrollbar } from 'tu-view-plus';
const max = ref(0);
const value = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof TuScrollbar>>();
onMounted(() => {
max.value = innerRef.value!.clientHeight - 240;
});
const handleSliderChange = (value: number) => {
scrollbarRef.value!.setScrollTop(value);
};
const scroll = ({ scrollTop }: { scrollTop: number }) => {
value.value = scrollTop;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
.demo-slider {
margin-bottom: 40px;
}
</style><template>
<tu-slider
class="demo-slider"
v-model="value"
:max="max"
@change="handleSliderChange"
/>
<tu-scrollbar ref="scrollbarRef" height="260px" always @scroll="scroll">
<div ref="innerRef">
<div v-for="item in 20" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { TuScrollbar } from 'tu-view-plus';
const max = ref(0);
const value = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof TuScrollbar>>();
onMounted(() => {
max.value = innerRef.value!.clientHeight - 240;
});
const handleSliderChange = (value: number) => {
scrollbarRef.value!.setScrollTop(value);
};
const scroll = ({ scrollTop }: { scrollTop: number }) => {
value.value = scrollTop;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
.demo-slider {
margin-bottom: 40px;
}
</style>Scrollbar API
Scrollbar 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 | - |
| wrap-class | Class of wrap container | String | - |
| view-style | Style of view | String Object | - |
| 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
| Name | Description | Type |
|---|---|---|
| scroll | Triggers when scrolling, return distance of scrolling | Function |
Scrollbar Slots
| Name | Description |
|---|---|
| default | Customize default content |
Scrollbar Exposes
| Name | Description | Type |
|---|---|---|
| handleScroll | Handle scroll event | Function |
| scrollTo | Scrolls to a particular set of coordinates | Function |
| setScrollTop | Set distance to scroll top | Function |
| setScrollLeft | Set distance to scroll left | Function |
| update | Update scrollbar state manually | Function |
| wrapRef | Scrollbar wrap ref | Object |