介绍

本文档主要用于描述 ShadcnScrollbar 组件的一些特性和用法。

用法

查看代码

<template>
  <ShadcnScrollbar>
    <div class="space-y-4">
      <p v-for="i in 100">This is a scrollbar component example index {{ i }}</p>
    </div>
  </ShadcnScrollbar>
</template>

高度 (height)

查看代码

<template>
  <ShadcnScrollbar height="100">
    <div class="space-y-4">
      <p v-for="i in 100">This is a scrollbar component example index {{ i }}</p>
    </div>
  </ShadcnScrollbar>
</template>

位置 (position)

查看代码

<template>
  <ShadcnScrollbar position="left">
    <div class="space-y-4">
      <p v-for="i in 100">This is a scrollbar component example index {{ i }}</p>
    </div>
  </ShadcnScrollbar>
</template>

自定义滚动条 (scrollbar)

查看代码

<template>
  <ShadcnScrollbar class="custom-scrollbar">
    <div class="space-y-4">
      <p v-for="i in 100">This is a scrollbar component example index {{ i }}</p>
    </div>
  </ShadcnScrollbar>
</template>

<style>
  .custom-scrollbar ::-webkit-scrollbar {
    width: 8px;
  }

  .custom-scrollbar ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .custom-scrollbar ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  .custom-scrollbar ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
</style>

滚动条 (Scroll Bar) 属性