Onionl UI

简体中文

English

简体中文

English

Appearance

Scrollbar 滚动条 ​

自定义滚动条组件，提供更好的滚动体验。

基础用法 ​

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
在 github 中打开
展开代码
复制代码
<template>
  <ol-scrollbar height="400px">
    <div v-for="i in 20" :key="i" class="text-lg h-50px bg-primary my-1 rounded-md text-center line-height-50px">
      {{ i }}
    </div>
  </ol-scrollbar>
</template>

滚动捕捉 ​

结合 ol-scroll-snap 组件，可以实现滚动捕捉效果。设置 snap 属性为 both、x、y 可以在水平和垂直方向都启用滚动捕捉。

1
2
3
4
5
6
7
8
9
10
在 github 中打开
展开代码
复制代码
<template>
  <ol-scrollbar height="400px" snap="both">
    <ol-scroll-snap
      v-for="i in 10"
      :key="i"
      align="start"
      class="text-3xl h-400px bg-primary my-1 rounded-md text-center line-height-400px"
    >
      {{ i }}
    </ol-scroll-snap>
  </ol-scrollbar>
</template>

Scrollbar 属性 ​

属性名说明类型默认值
height滚动区域的高度string | number-
snap滚动捕捉方向，可选值为 x、y、bothstring-

ScrollSnap 属性 ​

属性名说明类型默认值
align滚动捕捉的对齐方式，可选值为 start、center、endstringcenter