@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 |