cus-scrollbar

自定义滚动条，兼容谷歌、火狐、Edge浏览器

安装

npm install cus-scrollbar -S

使用

<script setup lang="ts">
import 'cus-scrollbar/lib/style.css'
import { CusScrollBar } from 'cus-scrollbar'
</script>

<template>
  <CusScrollBar style="height: 150px">
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
  </CusCornerCard>

  <CusScrollBar style="width: 150px;">
    <p>1 测试</p>
    <p>2 测试</p>
    <p>3 测试</p>
    <p>4 测试</p>
    <p>5 测试</p>
    <p>6 测试</p>
    <p>7 测试</p>
    <p>8 测试</p>
  </CusCornerCard>
</template>

属性

| key | desc | value | | :-------: | ------------------------ | -------------------- | | always | 滚动条常显示 | px像素 | | barWidth | 滚动条高度/厚度 | 颜色值（默认6px） | | isOutside | 滚动条是否显示在视口外面 | boolean（默认false） | | noResize | 视口大小是否不再改变 | boolean（默认false） | | quickJump | 是否点击开启跳转 | boolean（默认false） | | native | 是否使用原生滚动条 | boolean（默认false） |

样式可通过属性配置进行修改，也可直接在<CusScrollBar></CusScrollBar>进行添加 style 或者 class，样式会被组件继承。