lb-vue-ui

Appearance

Scrollbar 滚动条 ​

用于替换浏览器原生滚动条，提供更好的视觉效果和用户体验。

基本用法 ​

这是第 1 行内容，用于演示滚动条的基本功能。

这是第 2 行内容，用于演示滚动条的基本功能。

这是第 3 行内容，用于演示滚动条的基本功能。

这是第 4 行内容，用于演示滚动条的基本功能。

这是第 5 行内容，用于演示滚动条的基本功能。

这是第 6 行内容，用于演示滚动条的基本功能。

这是第 7 行内容，用于演示滚动条的基本功能。

这是第 8 行内容，用于演示滚动条的基本功能。

这是第 9 行内容，用于演示滚动条的基本功能。

这是第 10 行内容，用于演示滚动条的基本功能。

这是第 11 行内容，用于演示滚动条的基本功能。

这是第 12 行内容，用于演示滚动条的基本功能。

这是第 13 行内容，用于演示滚动条的基本功能。

这是第 14 行内容，用于演示滚动条的基本功能。

这是第 15 行内容，用于演示滚动条的基本功能。

这是第 16 行内容，用于演示滚动条的基本功能。

这是第 17 行内容，用于演示滚动条的基本功能。

这是第 18 行内容，用于演示滚动条的基本功能。

这是第 19 行内容，用于演示滚动条的基本功能。

这是第 20 行内容，用于演示滚动条的基本功能。 

<template>
  <lb-scrollbar height="200px">
    <div style="padding: 20px">
      <p v-for="item in 20" :key="item" style="margin: 10px 0">
        这是第 {{ item }} 行内容，用于演示滚动条的基本功能。
      </p>
    </div>
  </lb-scrollbar>
</template>

<script setup lang="ts">
// 基本用法示例
</script>

设置高度 ​

通过 height 属性设置滚动区域的高度。

固定高度 300px

内容行 1 - 这是一个固定高度为 300px 的滚动容器。

内容行 2 - 这是一个固定高度为 300px 的滚动容器。

内容行 3 - 这是一个固定高度为 300px 的滚动容器。

内容行 4 - 这是一个固定高度为 300px 的滚动容器。

内容行 5 - 这是一个固定高度为 300px 的滚动容器。

内容行 6 - 这是一个固定高度为 300px 的滚动容器。

内容行 7 - 这是一个固定高度为 300px 的滚动容器。

内容行 8 - 这是一个固定高度为 300px 的滚动容器。

内容行 9 - 这是一个固定高度为 300px 的滚动容器。

内容行 10 - 这是一个固定高度为 300px 的滚动容器。

内容行 11 - 这是一个固定高度为 300px 的滚动容器。

内容行 12 - 这是一个固定高度为 300px 的滚动容器。

内容行 13 - 这是一个固定高度为 300px 的滚动容器。

内容行 14 - 这是一个固定高度为 300px 的滚动容器。

内容行 15 - 这是一个固定高度为 300px 的滚动容器。

内容行 16 - 这是一个固定高度为 300px 的滚动容器。

内容行 17 - 这是一个固定高度为 300px 的滚动容器。

内容行 18 - 这是一个固定高度为 300px 的滚动容器。

内容行 19 - 这是一个固定高度为 300px 的滚动容器。

内容行 20 - 这是一个固定高度为 300px 的滚动容器。

内容行 21 - 这是一个固定高度为 300px 的滚动容器。

内容行 22 - 这是一个固定高度为 300px 的滚动容器。

内容行 23 - 这是一个固定高度为 300px 的滚动容器。

内容行 24 - 这是一个固定高度为 300px 的滚动容器。

内容行 25 - 这是一个固定高度为 300px 的滚动容器。

内容行 26 - 这是一个固定高度为 300px 的滚动容器。

内容行 27 - 这是一个固定高度为 300px 的滚动容器。

内容行 28 - 这是一个固定高度为 300px 的滚动容器。

内容行 29 - 这是一个固定高度为 300px 的滚动容器。

内容行 30 - 这是一个固定高度为 300px 的滚动容器。

固定高度 150px

内容行 1 - 这是一个固定高度为 150px 的滚动容器。

内容行 2 - 这是一个固定高度为 150px 的滚动容器。

内容行 3 - 这是一个固定高度为 150px 的滚动容器。

内容行 4 - 这是一个固定高度为 150px 的滚动容器。

内容行 5 - 这是一个固定高度为 150px 的滚动容器。

内容行 6 - 这是一个固定高度为 150px 的滚动容器。

内容行 7 - 这是一个固定高度为 150px 的滚动容器。

内容行 8 - 这是一个固定高度为 150px 的滚动容器。

内容行 9 - 这是一个固定高度为 150px 的滚动容器。

内容行 10 - 这是一个固定高度为 150px 的滚动容器。

内容行 11 - 这是一个固定高度为 150px 的滚动容器。

内容行 12 - 这是一个固定高度为 150px 的滚动容器。

内容行 13 - 这是一个固定高度为 150px 的滚动容器。

内容行 14 - 这是一个固定高度为 150px 的滚动容器。

内容行 15 - 这是一个固定高度为 150px 的滚动容器。 

<template>
  <div>
    <h4>固定高度 300px</h4>
    <lb-scrollbar
      height="300px"
      style="border: 1px solid #ddd; margin-bottom: 20px"
    >
      <div style="padding: 20px">
        <p v-for="item in 30" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 这是一个固定高度为 300px 的滚动容器。
        </p>
      </div>
    </lb-scrollbar>

    <h4>固定高度 150px</h4>
    <lb-scrollbar height="150px" style="border: 1px solid #ddd">
      <div style="padding: 20px">
        <p v-for="item in 15" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 这是一个固定高度为 150px 的滚动容器。
        </p>
      </div>
    </lb-scrollbar>
  </div>
</template>

<script setup lang="ts">
// 设置高度示例
</script>

最大高度 ​

通过 max-height 属性设置滚动区域的最大高度。

最大高度 200px（内容较少时不会出现滚动条）

内容行 1 - 内容较少，不会超过最大高度。

内容行 2 - 内容较少，不会超过最大高度。

内容行 3 - 内容较少，不会超过最大高度。

内容行 4 - 内容较少，不会超过最大高度。

内容行 5 - 内容较少，不会超过最大高度。

最大高度 200px（内容较多时会出现滚动条）

内容行 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 - 内容较多，超过最大高度时会出现滚动条。 

<template>
  <div>
    <h4>最大高度 200px（内容较少时不会出现滚动条）</h4>
    <lb-scrollbar
      max-height="200px"
      style="border: 1px solid #ddd; margin-bottom: 20px"
    >
      <div style="padding: 20px">
        <p v-for="item in 5" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 内容较少，不会超过最大高度。
        </p>
      </div>
    </lb-scrollbar>

    <h4>最大高度 200px（内容较多时会出现滚动条）</h4>
    <lb-scrollbar max-height="200px" style="border: 1px solid #ddd">
      <div style="padding: 20px">
        <p v-for="item in 25" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 内容较多，超过最大高度时会出现滚动条。
        </p>
      </div>
    </lb-scrollbar>
  </div>
</template>

<script setup lang="ts">
// 最大高度示例
</script>

原生滚动条 ​

通过 native 属性使用原生滚动条样式。

自定义滚动条

内容行 1 - 使用自定义样式的滚动条。

内容行 2 - 使用自定义样式的滚动条。

内容行 3 - 使用自定义样式的滚动条。

内容行 4 - 使用自定义样式的滚动条。

内容行 5 - 使用自定义样式的滚动条。

内容行 6 - 使用自定义样式的滚动条。

内容行 7 - 使用自定义样式的滚动条。

内容行 8 - 使用自定义样式的滚动条。

内容行 9 - 使用自定义样式的滚动条。

内容行 10 - 使用自定义样式的滚动条。

内容行 11 - 使用自定义样式的滚动条。

内容行 12 - 使用自定义样式的滚动条。

内容行 13 - 使用自定义样式的滚动条。

内容行 14 - 使用自定义样式的滚动条。

内容行 15 - 使用自定义样式的滚动条。

内容行 16 - 使用自定义样式的滚动条。

内容行 17 - 使用自定义样式的滚动条。

内容行 18 - 使用自定义样式的滚动条。

内容行 19 - 使用自定义样式的滚动条。

内容行 20 - 使用自定义样式的滚动条。

原生滚动条

内容行 1 - 使用浏览器原生滚动条样式。

内容行 2 - 使用浏览器原生滚动条样式。

内容行 3 - 使用浏览器原生滚动条样式。

内容行 4 - 使用浏览器原生滚动条样式。

内容行 5 - 使用浏览器原生滚动条样式。

内容行 6 - 使用浏览器原生滚动条样式。

内容行 7 - 使用浏览器原生滚动条样式。

内容行 8 - 使用浏览器原生滚动条样式。

内容行 9 - 使用浏览器原生滚动条样式。

内容行 10 - 使用浏览器原生滚动条样式。

内容行 11 - 使用浏览器原生滚动条样式。

内容行 12 - 使用浏览器原生滚动条样式。

内容行 13 - 使用浏览器原生滚动条样式。

内容行 14 - 使用浏览器原生滚动条样式。

内容行 15 - 使用浏览器原生滚动条样式。

内容行 16 - 使用浏览器原生滚动条样式。

内容行 17 - 使用浏览器原生滚动条样式。

内容行 18 - 使用浏览器原生滚动条样式。

内容行 19 - 使用浏览器原生滚动条样式。

内容行 20 - 使用浏览器原生滚动条样式。 

<template>
  <div>
    <h4>自定义滚动条</h4>
    <lb-scrollbar
      height="150px"
      style="border: 1px solid #ddd; margin-bottom: 20px"
    >
      <div style="padding: 20px">
        <p v-for="item in 20" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 使用自定义样式的滚动条。
        </p>
      </div>
    </lb-scrollbar>

    <h4>原生滚动条</h4>
    <lb-scrollbar native height="150px" style="border: 1px solid #ddd">
      <div style="padding: 20px">
        <p v-for="item in 20" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 使用浏览器原生滚动条样式。
        </p>
      </div>
    </lb-scrollbar>
  </div>
</template>

<script setup lang="ts">
// 原生滚动条示例
</script>

总是显示 ​

通过 always 属性让滚动条总是显示。

默认行为（鼠标悬停时显示）

内容行 1 - 鼠标悬停时显示滚动条。

内容行 2 - 鼠标悬停时显示滚动条。

内容行 3 - 鼠标悬停时显示滚动条。

内容行 4 - 鼠标悬停时显示滚动条。

内容行 5 - 鼠标悬停时显示滚动条。

内容行 6 - 鼠标悬停时显示滚动条。

内容行 7 - 鼠标悬停时显示滚动条。

内容行 8 - 鼠标悬停时显示滚动条。

内容行 9 - 鼠标悬停时显示滚动条。

内容行 10 - 鼠标悬停时显示滚动条。

内容行 11 - 鼠标悬停时显示滚动条。

内容行 12 - 鼠标悬停时显示滚动条。

内容行 13 - 鼠标悬停时显示滚动条。

内容行 14 - 鼠标悬停时显示滚动条。

内容行 15 - 鼠标悬停时显示滚动条。

总是显示滚动条

内容行 1 - 滚动条始终可见。

内容行 2 - 滚动条始终可见。

内容行 3 - 滚动条始终可见。

内容行 4 - 滚动条始终可见。

内容行 5 - 滚动条始终可见。

内容行 6 - 滚动条始终可见。

内容行 7 - 滚动条始终可见。

内容行 8 - 滚动条始终可见。

内容行 9 - 滚动条始终可见。

内容行 10 - 滚动条始终可见。

内容行 11 - 滚动条始终可见。

内容行 12 - 滚动条始终可见。

内容行 13 - 滚动条始终可见。

内容行 14 - 滚动条始终可见。

内容行 15 - 滚动条始终可见。 

<template>
  <div>
    <h4>默认行为（鼠标悬停时显示）</h4>
    <lb-scrollbar
      height="150px"
      style="border: 1px solid #ddd; margin-bottom: 20px"
    >
      <div style="padding: 20px">
        <p v-for="item in 15" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 鼠标悬停时显示滚动条。
        </p>
      </div>
    </lb-scrollbar>

    <h4>总是显示滚动条</h4>
    <lb-scrollbar always height="150px" style="border: 1px solid #ddd">
      <div style="padding: 20px">
        <p v-for="item in 15" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 滚动条始终可见。
        </p>
      </div>
    </lb-scrollbar>
  </div>
</template>

<script setup lang="ts">
// 总是显示滚动条示例
</script>

手动控制 ​

通过组件实例的方法手动控制滚动位置。

内容行 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 - 可以通过按钮控制滚动位置。

当前滚动位置：scrollTop = 0, scrollLeft = 0
<template>
  <div>
    <div style="margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap">
      <lb-button @click="scrollToTop">滚动到顶部</lb-button>
      <lb-button @click="scrollToBottom" style="margin-left: 10px"
        >滚动到底部</lb-button
      >
      <lb-button @click="scrollToMiddle" style="margin-left: 10px"
        >滚动到中间</lb-button
      >
      <lb-button @click="setScrollTop100" style="margin-left: 10px"
        >设置 scrollTop 为 100</lb-button
      >
    </div>

    <lb-scrollbar
      ref="scrollbarRef"
      height="200px"
      style="border: 1px solid #ddd"
      @scroll="onScroll"
    >
      <div style="padding: 20px">
        <p v-for="item in 50" :key="item" style="margin: 10px 0">
          内容行 {{ item }} - 可以通过按钮控制滚动位置。
        </p>
      </div>
    </lb-scrollbar>

    <div style="margin-top: 10px; color: #666">
      当前滚动位置：scrollTop = {{ scrollTop }}, scrollLeft = {{ scrollLeft }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { LbScrollbarInstance } from "@lb-vue-ui/components";

const scrollbarRef = ref<LbScrollbarInstance>();
const scrollTop = ref(0);
const scrollLeft = ref(0);

const scrollToTop = () => {
  scrollbarRef.value?.scrollTo(0, 0);
};

const scrollToBottom = () => {
  scrollbarRef.value?.scrollTo(0, 999999);
};

const scrollToMiddle = () => {
  scrollbarRef.value?.scrollTo(0, 300);
};

const setScrollTop100 = () => {
  scrollbarRef.value?.setScrollTop(100);
};

const onScroll = (data: { scrollTop: number; scrollLeft: number }) => {
  scrollTop.value = data.scrollTop;
  scrollLeft.value = data.scrollLeft;
};
</script>

滚动到底部事件 ​

当滚动到底部时会触发 end-reached 事件，常用于实现无限滚动等功能。

滚动到底部时会触发 end-reached 事件：

列表项 1
列表项 2
列表项 3
列表项 4
列表项 5
列表项 6
列表项 7
列表项 8
列表项 9
列表项 10
列表项 11
列表项 12
列表项 13
列表项 14
列表项 15
列表项 16
列表项 17
列表项 18
列表项 19
列表项 20

触发次数: 0

<template>
  <div>
    <p>滚动到底部时会触发 end-reached 事件：</p>
    <lb-scrollbar height="200px" @end-reached="handleEndReached">
      <div style="padding: 20px">
        <div
          v-for="item in items"
          :key="item"
          style="padding: 10px; border-bottom: 1px solid #eee"
        >
          列表项 {{ item }}
        </div>
        <div
          v-if="loading"
          style="text-align: center; padding: 20px; color: #666"
        >
          加载中...
        </div>
      </div>
    </lb-scrollbar>
    <p style="margin-top: 10px; color: #666">触发次数: {{ endReachedCount }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const items = ref(Array.from({ length: 20 }, (_, i) => i + 1));
const endReachedCount = ref(0);
const loading = ref(false);

const handleEndReached = () => {
  endReachedCount.value++;

  // 模拟加载更多数据
  if (!loading.value) {
    loading.value = true;
    setTimeout(() => {
      const currentLength = items.value.length;
      const newItems = Array.from(
        { length: 10 },
        (_, i) => currentLength + i + 1
      );
      items.value.push(...newItems);
      loading.value = false;
    }, 1000);
  }
};
</script>

属性 ​

属性名类型默认值说明
heightstring | number—滚动条的高度
max-heightstring | number—滚动条的最大高度
nativebooleanfalse是否使用原生滚动条样式
wrap-styleStyleValue—包裹容器的样式
wrap-classstring | string[]—包裹容器的类名
view-styleStyleValue—视图的样式
view-classstring | string[]—视图的类名
noresizebooleanfalse不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能
tagstring'div'视图的元素标签
alwaysbooleanfalse总是显示滚动条
min-sizenumber20滚动条最小尺寸
idstring—视图的 id
rolestring—视图的 role
aria-labelstring—视图的 aria-label
aria-orientation'horizontal' | 'vertical'—视图的 aria-orientation
tabindexnumber | string—包裹容器的 tabindex

事件 ​

事件名说明参数
scroll滚动时触发{ scrollTop: number, scrollLeft: number }
end-reached滚动到底部时触发—

方法 ​

方法名说明参数
handleScroll处理滚动事件—
scrollTo滚动到特定位置(options: ScrollToOptions | number, yCoord?: number)
setScrollTop设置滚动条到顶部的距离(scrollTop: number)
setScrollLeft设置滚动条到左边的距离(scrollLeft: number)
update手动更新滚动条状态—

插槽 ​

插槽名说明
default滚动内容