Scrollbar

Brauzerning asl scrollbar’ini uslublangan overlay bilan almashtiradigan maxsus 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 dan qisqa kontentda scrollbar koʻrinmaydi.

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

Hover qilmaganda ham scrollbar’ni koʻrsating.

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

Thumb qalinligini size propi orqali boshqaring.

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

Buning oʻrniga brauzerning asl scrollbar’idan foydalaning.

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

Pastga yaqinlashganda avtomatik tarzda qoʻshimcha kontent yuklaydi. Scroll holati pastdan distance chegarasiga yetganda infinite hodisasi ishga tushadi.

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

Foydalanuvchi scroll qilishni toʻxtatganda scrollend hodisasi ishga tushadi.

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	''	Qatʼiy balandlik
maxHeight	string	''	Maksimal balandlik
native	boolean	false	Asl scrollbar’dan foydalanish
always	boolean	false	Scrollbar’ni doimo koʻrsatish
size	'sm' | 'default' | 'lg'	'default'	Scrollbar thumb qalinligi
infinite	boolean	false	Cheksiz scroll’ni yoqish
distance	number	0	Infinite’ni ishga tushirish uchun pastdan pixel chegarasi
noresize	boolean	false	Resize observer’ni oʻchirish
tag	string	'div'	Wrapper element tegi

Exposed Methods

Method	Type	Description
scrollTo	(options: ScrollToOptions) => void	Pozitsiyaga scroll qilish
setScrollTop	(top: number) => void	Vertikal scroll’ni oʻrnatish
setScrollLeft	(left: number) => void	Gorizontal scroll’ni oʻrnatish
update	() => void	Scrollbar’ni qayta hisoblash

Events

Event	Type	Description
scroll	(e: Event) => void	Scroll qilinganda ishga tushadi
scrollend	(e: Event) => void	Scroll qilish toʻxtaganda ishga tushadi
infinite	() => void	Scroll pastki chegaraga yetganda ishga tushadi