1.0.3 • Published 6 years ago
scrollbar.js v1.0.3
ScrollBar
a js plugin to make your list scrollable
Install
install with npm:
npm install --save-dev scrollbar.js
Introduction
scrollbar.js is a js plugin to make your list scrollable, you can both drag and click the list to make it scroll, when you release the mouse, it can rebounds to the nearest item.
Usage
Add the html for your list, notice that the default class selected
is necessary.
<div class="list-wrapper">
<ul id="picker">
<li class="selected">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
Add the style, the list's wrapper should be position: relative
and overflow: hidden
, also the height
should be set otherwise you can not drag the list but click.
.list-wrapper {
position: relative;
overflow: hidden;
height: 42px;
cursor: -webkit-grab;
}
.list-wrapper ul {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
}
.list-wrapper li {
color: #2A5561;
padding: 10px;
}
.list-wrapper ul li.selected {
color: #448AFF;
}
Add the plugin, specify your selector for the list and callback that will trigger when the spring animation ends.
const scrollbar = require('scrollbar.js');
scrollbar({
selector: '#picker',
callback: function (index) {
// the index of the selected item in the list
console.log(index);
}
});
and you will see: