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