Scrollbar 滚动条

代码演示

基础用法

<template>
    <x-scrollbar height="400px">
        <p
            v-for="item in 20"
            :key="item"
            class="scrollbar-demo-item">
            {{ item }}
        </p>
    </x-scrollbar>
</template>

<script setup></script>

<style lang="less" scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: @control-item-bg-hover;
}
</style>

横向滚动

<template>
    <x-scrollbar>
        <div class="scrollbar-flex-content">
            <p
                v-for="item in 50"
                :key="item"
                class="scrollbar-demo-item">
                {{ item }}
            </p>
        </div>
    </x-scrollbar>
</template>

<script setup></script>

<style lang="less" scoped>
.scrollbar-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: @control-item-bg-hover;
}
</style>

最大高度

<template>
    <a-space :size="24">
        <a-button @click="handleAdd">Add Item</a-button>
        <a-button @click="handleDelete">Delete Item</a-button>
    </a-space>
    <x-scrollbar max-height="400px">
        <p
            v-for="item in count"
            :key="item"
            class="scrollbar-demo-item">
            {{ item }}
        </p>
    </x-scrollbar>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(3)

function handleAdd() {
    count.value++
}

function handleDelete() {
    if (count.value > 0) {
        count.value--
    }
}
</script>

<style lang="less" scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: @control-item-bg-hover;
}
</style>

手动滚动

<template>
    <x-scrollbar
        ref="scrollbarRef"
        always
        height="400px"
        @initialized="onInitialized"
        @scroll="onScroll">
        <p
            v-for="item in 20"
            :key="item"
            class="scrollbar-demo-item">
            {{ item }}
        </p>
    </x-scrollbar>

    <a-slider
        v-model:value="value"
        :max="max"
        :tip-formatter="formatTip"
        class="mt-8-4"
        @change="onChange" />
</template>

<script setup>
import { ref } from 'vue'

const max = ref(0)
const value = ref(0)
const scrollbarRef = ref()

function onInitialized(instance) {
    max.value = instance.elements().content.scrollHeight - instance.elements().content.clientHeight
}

function onChange(value) {
    scrollbarRef.value.setScrollTop(value)
}

function onScroll(instance) {
    value.value = instance.elements().scrollEventElement.scrollTop
}

function formatTip(value) {
    return `${value} px`
}
</script>

<style lang="less" scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: @control-item-bg-hover;
}
</style>

API

Props

参数	说明	类型	默认值
height	容器高度	number string	100%
max-height	最大高度	number string	-
always	是否一直显示滚动条，为 false 时，仅滑过容器时显示	boolean	false

Events

事件名	说明	回调参数
scroll	滚动时	instance，event
initialized	初始化完成	instance
updated	内容更新时	instance
destroyed	销毁	instance

提示

Scrollbar 基于 OverlayScrollbars 进行扩展，更多用法详见：OverlayScrollbars