@matrix-scrollbar/core
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

@matrix-scrollbar/core 🔭👩‍🚀

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/core

Alternative with just a script tag

<script src="https://unpkg.com/@matrix-scrollbar/core@0.0.13/lib/index.umd.js"></script>;

var matrixScrollbar = new MatrixScrollbar({ options });

// ..

// Updates the scrollbar / scroll thumb
matrixScrollbar.recount();

// Unsubscribe from all event listeners that are setup behind the scene
matrixScrollbar.disconnect();

Example

Try it out in the browser

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/@matrix-scrollbar/core@0.0.13/lib/umd/index.js"></script>

    <style>
      .list {
        border: 2px solid black;
        height: 400px;
        width: 300px;
        list-style: none;
        padding: 0;
      }

      li {
        height: 100px;
      }

      li:nth-child(odd) {
        background: #995cc92e;
      }
    </style>

    <ul class="list"></ul>

    <script>
      var viewport = document.querySelector(".list");

      new Array(100).fill(null).forEach((item, index) => {
        var li = document.createElement("li");
        li.innerText = index;
        viewport.appendChild(li);
      });

      var matrixScrollbar = new MatrixScrollbar({
        scrollViewport: viewport,
        autoHideThumb: false
      });
    </script>
  </body>
</html>

Props/Settings

key default description
autoHideThumb true boolean
minThumbHeight 30 number
scrollViewport optional HTMLElement
totalHeight optional number: rare cases to help with the calculation
className optional string: setting class to the most outer element

Styling

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

Readme

Keywords

none

Package Sidebar

Install

npm i @matrix-scrollbar/core

Weekly Downloads

3

Version

1.0.4

License

MIT

Unpacked Size

38.8 kB

Total Files

8

Last publish

Collaborators

  • rajjejosefsson