@matrix-scrollbar/core
v1.0.4
Published
Matrix Scrollbar in pure javascript
Readme
@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/coreAlternative with just a script tag
<script src="https://unpkg.com/@matrix-scrollbar/[email protected]/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
<!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/[email protected]/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 |