Scrollbar

Custom scrollbar component, providing a better scrolling experience.

Basic Usage

Control the height of the scrolling area by setting the height attribute.

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>

Scroll Snap

Combining with the ol-scroll-snap component, scroll snap effect can be achieved. Setting the snap attribute to both, x, or y enables scroll snap in both horizontal and vertical directions.

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 Attributes

Attribute Name	Description	Type	Default Value
height	Height of the scrolling area	string | number	-
snap	Scroll snap direction, optional values are x, y, both	string	-

ScrollSnap Attributes

Attribute Name	Description	Type	Default Value
align	Alignment of scroll snap, optional values are start, center, end	string	center