Demo - Installation - Methods - Callbacks - Styling
◼️ Features:
- 🔧 Native Scroll Behavior
- 🛠 Standardized events / shortcuts / API
- 🌠 Fast & Lightweight
- 💪 No dependencies, built with VanillaJS
- 🌎 Tested in all modern browsers
- 🖌 Easy Customization
- 📢 Multiple Callbacks
◼️ Demo:
https://bmsvieira.github.io/letmescroll.js/
◼️ Installation (Browser):
1 - Include JavaScript Source.
<script src="path/to/letmescroll.js"></script>2 - Include Styles.
<link rel="stylesheet" href="path/to/letmescroll.css">3 - Set HTML.
<div id="example">
<!-- HTML CODE HERE -->
</div>4 - Initilize.
document.addEventListener("DOMContentLoaded", function() {
demo = new LetMeScroll({
selector: "#example",
config : {
dimensions : {
width : "auto",
height : "500px"
},
scroll : {
bottomOffset: 0,
autoHide: true
}
}
});
});◼️ CDN:
You can use our CDN (provided by JSDelivr) for the JavaScript and CSS files.
// Javascript
<script src="https://cdn.jsdelivr.net/gh/BMSVieira/letmescroll.js@latest/js/letmescroll.js"></script>
// CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BMSVieira/letmescroll.js@latest/css/letmescroll.css">◼️ Methods:
destroy: Destroy current scrollbar and unbind all its events
demo.destroy();build: Build new LetMeScroll
demo.build();refresh: Refresh current scrollbar
demo.refresh();scrollTo: Scroll to specific location (px)
| Type | Description |
|---|---|
int |
Jump to specific location in the container |
demo.scrollTo(200);appendTo: Add new content to the scroll container
| Name | Value | Description |
|---|---|---|
position |
afterbegin or beforeend |
Add new items at beginning or ending of the container |
items |
object |
Options to add to original selectbox |
demo.appendTo({
position: "afterbegin",
items : {
0: {
content: '<!-- HTML ELEMENT HERE -->'
}
},
onComplete: function(){
<!-- CODE HERE -->
}
});◼️ Callbacks:
There are multiple callbacks you can use when building a new instance.
// Called when LetMeScroll is initialized
onComplete: function(){ <!-- CODE HERE --> }// Called when scrollbar reaches the bottom.
onEnd: function(){ <!-- CODE HERE --> }// Called when scrollbar reaches the top
onTop: function(){ <!-- CODE HERE --> }// Called everytime scrollbar moves
onMove: function(){ <!-- CODE HERE --> }// Called when Drag starts
onDragStart: function(){ <!-- CODE HERE --> }// Called when Drag Stops
onDragStop: function(){ <!-- CODE HERE --> }Mobile Only
// Called when Touch starts
onTouchStart: function(){ <!-- CODE HERE --> }// Called when Touch Stops
onTouchStop: function(){ <!-- CODE HERE --> }◼️ API > Gets:
// Returns container DOM element (With this one, you can add new content)
demo.mainElementId
// Returns scrollbar container id
demo.scrollbarId
// Returns trackbar container id
demo.trackbarId◼️ Styling :
Using CSS Custom Properties you can easily customize your scrollbar.
Check below a list of variables and what they are used for:
| Name | Description | Default |
|---|---|---|
--lms_scrollbar_bg |
Scrollbar background-color | #868686 |
--lms_scrollbar_radius |
Scrollbar border-radius | 5px |
--lms_scrollpath_bg |
Scrollbar path background-color | transparent |
--lms_scrollpath_radius |
Scrollbar path border-radius | 5px |