Scrollbar 滚动条

代码演示

基础用法

<script setup></script>

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

<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>

横向滚动

<script setup></script>

<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>

<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>

最大高度

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

const count = ref(3)

function handleAdd() {
  count.value++
}

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

<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>

<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>

手动滚动

<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>

<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>

<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