@m0ksem/vue-custom-scrollbar v0.0.7

Vue custom scrollbar

Custom scrollbar for vue3.

Instalation

yarn add @m0ksem/vue-custom-scrollbar

// main.js
import '@m0ksem/vue-custom-scrollbar/css'
import { VueCustomScrollbar } from '@m0ksem/vue-custom-scrollbar'
...
app.component('scrollbar', VueCustomScrollbar)

For nuxt3, lib needs to be transpiled.

Component api

Props

Slots

type ScrollbarSlotBind = {
  horizontal: boolean,
  vertical: boolean,
  placement: 'horizontal' | 'vertical',
  focused: boolean
}

Usage example

<script setup lang="ts">
import { VueCustomScrollbar } from '@m0ksem/vue-custom-scrollbar'
</script>

<template>
  <VueCustomScrollbar style="height: 500px; width: 300px" thickness="16px" right bottom left top trackColor="transparent" inner>
    <div class="test-long-thing" />

    <template #thumb="{ placement, focused }">
      <div 
        class="custom-thumb" 
        :class="{
         [`custom-thumb--${placement}`]: true,
          'custom-thumb--focused': focused 
        }"
      />
    </template>
  </VueCustomScrollbar>
</template>

<style lang="scss">
  .test-long-thing {
    background: linear-gradient(45deg, #10002b, #e0aaff);
    overflow: auto;
    resize: both;
    height: 1000px;
    width: 1000px;
  }

  .custom-thumb {
    transition: all 0.5s ease;
    &--horizontal {
      background: linear-gradient(90deg, #480ca8, #4895ef);
    }

    &--vertical {
      background: linear-gradient(0, #480ca8, #4895ef);
    }

    &--focused {
      &.custom-thumb {
        &--horizontal {
          background: linear-gradient(90deg, #c307e4, #5c5af3);
        }

        &--vertical {
          background: linear-gradient(0, #c307e4, #5c5af3);
        }
      }
    }
  }
</style>