@matrix-scrollbar/vue 🔭👩‍🚀

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save @matrix-scrollbar/vue

This package also depends on vue. Please make sure you have it installed as well.

Example

Try it out in the browser

<template>
  <div id="app">
    <matrix-scrollbar className="styledBox">
      <ul class="sizeOfList">
        <li
          v-for="(item, index) in items"
          :key="`item-${index}`"
          class="list-item"
        >
          {{ index }}
        </li>
      </ul>
    </matrix-scrollbar>
  </div>
</template>

<script>
import { MatrixScrollbar } from "@matrix-scrollbar/vue";

export default {
  name: "app",
  components: {
    MatrixScrollbar
  },
  data() {
    return {
      items: new Array(100).fill(null)
    };
  }
};
</script>


<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sizeOfList {
    height: 300px;
    width: 250px;
  }

  .styledBox {
    width: auto;
    height: auto;
    border: 1px solid #e8e8e8;
    background-color: white;
    display: inline-flex;
    box-shadow: 0 16px 18px -4px rgba(0, 0, 0, 0.1);
  }

  .list-item {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .list-item:nth-of-type(odd) {
    background-color: #995cc92e;
  }
</style>

Props/Settings

| key | default | description | | ---------------- | -------- | ------------------------------------------------ | | autoHideThumb | true | boolean | | minThumbHeight | 30 | number | | viewportId | optional | string, if the first element is not the viewport | | totalHeight | optional | number: rare cases to help with the calculation | | class | optional | string: setting class to the most outer element |

Styling

| class | active (appended) | | ------------------------ | ------------------------------- | | matrixScrollbar__thumb | matrixScrollbar__thumb-active | | matrixScrollbar__rail | matrixScrollbar__rail-active |