Vue Virtual Scrollbar 组件库

一个轻量级的虚拟滚动条组件，支持水平和垂直滚动，适用于Vue项目。

特性

• 支持水平和垂直滚动条
• 自定义滚动条宽度
• 平滑的滚动体验
• 支持RTL布局
• 支持仅引入滚动条

安装

npm install vv-scrollbar
# 或者使用 yarn
yarn add vv-scrollbar
# 或者使用 pnpm
pnpm add vv-scrollbar

使用方式

简单用法

<template>
  <Scroll class="scroll-container" barWidth="8" @scroll="onScroll">
    <div class="long-content"></div>
  </Scroll>
</template>
<script setup lang="ts">
import { Scroll } from "vv-scrollbar";

function onScroll(e: Event) {
    console.log(e)
}
</script>
<style scoped>
.scroll-container {
  width: 100%;
  height: 300px;
}

.long-content {
  height: 3000px;
}
</style>

高级用法

<template>
    <div class="scroll-container">
        <div ref="content" class="scroll-content" @scroll="onScroll">
            <div class="long-content">xxx</div>
        </div>
        <ScrollBar type="vertical" :scrollHeight="scrollHeight" :scrollTop="scrollTop" :barWidth="8" @update:verticalTop="scrollToTop" />
        <ScrollBar type="horizontal" :scrollWidth="scrollWidth" :scrollLeft="scrollLeft" :barWidth="8" @update:horizonLeft="scrollToLeft" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Scrollbar, useScroll } from "vv-scrollbar";

const content = ref<HTMLDivElement>(null);

const { scrollLeft, scrollTop, scrollWidth, scrollHeight, onScroll, scrollToTop, scrollToLeft } = useScroll(content);

</script>
<style scoped>
.scroll-container{
    position: relative;
    width: 100%;
    height: 300px;
}

.scroll-content{
    overflow: auto;
    height: 100%;
    width: 100%;
    
    &::--webkit-scrollbar {
        display: none;
    }
}

.long-content{
    height: 3000px;
    width: 4000px;
}
</style>

API

Scroll

属性

| 属性名 | 类型 | 默认值 | 说明 | |-----|-----|----|-----| | barWidth | number | 8 | 滚动条宽度 | | direction | 'ltr' | 'rtl' | 'ltr' | 布局方式，ltr表示从左到右，rtl表示从右到左 |

事件

| 事件名 | 类型 | 说明 | |-----|-----|-----| | scroll | Event | 滚动事件 |

方法

| 方法名 | 说明 | |-----|-----| | scrollTop | 滚动条顶部位置（支持set, get） | | scrollLeft | 滚动条左侧位置（支持set, get） |

ScrollBar

属性

| 属性名 | 类型 | 默认值 | 说明 | |-----|-----|----|-----| | barWidth | number | 8 | 滚动条宽度 | | type | vertical | horizontal | 滚动条类型 | | scrollHeight | number | 0 | 滚动内容高度 | | scrollWidth | number | 0 | 滚动内容宽度 | | scrollLeft | number | 0 | 滚动条左侧位置 | | scrollTop | number | 0 | 滚动条顶部位置 | | direction | 'ltr' | 'rtl' | 'ltr' | 布局方式，ltr表示从左到右，rtl表示从右到左 |