滚动区域

增强原生滚动功能,实现自定义、跨浏览器的样式效果。

Tags

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1

安装

pnpm dlx shadcn-vue@latest add scroll-area

使用方法

vue
<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area'
</script>

<template>
  <ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
    爱开玩笑的人开始在午夜潜入城堡,到处留下笑话:在国王的枕头下、在他的汤里,甚至在皇家厕所里。国王非常愤怒,却似乎无法阻止这位爱开玩笑的人。直到有一天,王国里的人们发现爱开玩笑的人留下的笑话非常有趣,让他们忍不住大笑。而且他们一旦开始笑,就停不下来了。
  </ScrollArea>
</template>

示例

横向滚动

Photo by Ornella Binni
Photo by Ornella Binni
Photo by Tom Byrom
Photo by Tom Byrom
Photo by Vladimir Malyavko
Photo by Vladimir Malyavko
Edit this page on GitHub