Scroll made easy!
Demo - Installation - Methods - Callbacks - Styling
https://bmsvieira.github.io/letmescroll.js/ 1 - Include JavaScript Source. 2 - Include Styles. 3 - Set HTML. 4 - Initilize. You can use our CDN (provided by JSDelivr) for the JavaScript and CSS files. destroy:
Destroy current scrollbar and unbind all its events build:
Build new LetMeScroll refresh:
Refresh current scrollbar scrollTo:
Scroll to specific location (px) appendTo:
Add new content to the scroll container There are multiple callbacks you can use when building a new instance. Mobile Only Using CSS Custom Properties you can easily customize your scrollbar.
◼️ Features:
◼️ Demo:
◼️ Installation (Browser):
<script src="path/to/letmescroll.js"></script>
<link rel="stylesheet" href="path/to/letmescroll.css">
<div id="example">
<!-- HTML CODE HERE -->
</div>
document.addEventListener("DOMContentLoaded", function() {
demo = new LetMeScroll({
selector: "#example",
config : {
dimensions : {
width : "auto",
height : "500px"
},
scroll : {
bottomOffset: 0,
autoHide: true
}
}
});
});
◼️ CDN:
// 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:
demo.destroy();
demo.build();
demo.refresh();
Type
Description
int
Jump to specific location in the container
demo.scrollTo(200);
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:
// 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 --> }
// 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 :
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