Scrollbar

Пользовательская полоса прокрутки, заменяющая нативную полосу браузера стилизованным оверлеем.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

<template>
  <VxScrollbar height="200px">
    <p v-for="i in 20" :key="i">Item {{ i }}</p>
  </VxScrollbar>
</template>

Horizontal

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template>
  <VxScrollbar>
    <div style="display: flex; gap: 12px; width: max-content">
      <div v-for="i in 20" :key="i" class="card">{{ i }}</div>
    </div>
  </VxScrollbar>
</template>

Max Height

Содержимое, которое короче max-height, не покажет полосу прокрутки.

Scrollable item 1

Scrollable item 2

Scrollable item 3

Scrollable item 4

Scrollable item 5

Scrollable item 6

Scrollable item 7

Scrollable item 8

Scrollable item 9

Scrollable item 10

Scrollable item 11

Scrollable item 12

Scrollable item 13

Scrollable item 14

Scrollable item 15

Scrollable item 16

Scrollable item 17

Scrollable item 18

Scrollable item 19

Scrollable item 20

Scrollable item 21

Scrollable item 22

Scrollable item 23

Scrollable item 24

Scrollable item 25

Scrollable item 26

Scrollable item 27

Scrollable item 28

Scrollable item 29

Scrollable item 30

<template>
  <VxScrollbar max-height="200px">
    <p v-for="i in 30" :key="i">Scrollable item {{ i }}</p>
  </VxScrollbar>
</template>

Always Visible

Показывать полосу прокрутки даже без наведения.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

<template>
  <VxScrollbar height="200px" always>
    <p v-for="i in 20" :key="i">Item {{ i }}</p>
  </VxScrollbar>
</template>

Sizes

Управляйте толщиной ползунка с помощью свойства size.

sm

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

default

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

lg

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

<template>
  <VxScrollbar height="150px" size="sm" always>...</VxScrollbar>
  <VxScrollbar height="150px" always>...</VxScrollbar>
  <VxScrollbar height="150px" size="lg" always>...</VxScrollbar>
</template>

Native

Используйте вместо этого нативную полосу прокрутки браузера.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

<template>
  <VxScrollbar height="200px" native>
    <p v-for="i in 20" :key="i">Item {{ i }}</p>
  </VxScrollbar>
</template>

Infinite Scroll

Автоматически подгружает больше содержимого при прокрутке к низу. Событие infinite вызывается, когда позиция прокрутки достигает порога distance от низа.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

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

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

function loadMore() {
  if (loading.value) return
  loading.value = true
  setTimeout(() => {
    const start = items.value.length
    for (let i = 1; i <= 10; i++) {
      items.value.push(start + i)
    }
    loading.value = false
  }, 800)
}
</script>

<template>
  <VxScrollbar height="200px" infinite :distance="20" @infinite="loadMore">
    <p v-for="item in items" :key="item">Item {{ item }}</p>
    <div v-if="loading">Loading...</div>
  </VxScrollbar>
</template>

Scroll End

Событие scrollend вызывается, когда пользователь прекращает прокрутку.

Scroll to see event

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

<script setup>
function onScrollEnd(e) {
  console.log('Scroll ended!', e)
}
</script>

<template>
  <VxScrollbar height="200px" @scrollend="onScrollEnd">
    <p v-for="i in 30" :key="i">Item {{ i }}</p>
  </VxScrollbar>
</template>

Props

Prop	Type	Default	Description
height	string	''	Фиксированная высота
maxHeight	string	''	Максимальная высота
native	boolean	false	Использовать нативную полосу прокрутки
always	boolean	false	Всегда показывать полосу прокрутки
size	'sm' | 'default' | 'lg'	'default'	Толщина ползунка полосы прокрутки
infinite	boolean	false	Включить бесконечную прокрутку
distance	number	0	Порог в пикселях от низа для срабатывания infinite
noresize	boolean	false	Отключить observer изменения размеров
tag	string	'div'	Тег элемента-обёртки

Exposed Methods

Method	Type	Description
scrollTo	(options: ScrollToOptions) => void	Прокрутить к позиции
setScrollTop	(top: number) => void	Установить вертикальную прокрутку
setScrollLeft	(left: number) => void	Установить горизонтальную прокрутку
update	() => void	Пересчитать полосу прокрутки

Events

Event	Type	Description
scroll	(e: Event) => void	Вызывается при прокрутке
scrollend	(e: Event) => void	Вызывается при остановке прокрутки
infinite	() => void	Вызывается, когда прокрутка достигает нижнего порога