Lightweight Mobile-compatible Custom Scrollbar Library – letmescroll.js

Preview:

Description:

Not all websites need a custom scrollbar. Some websites can get by with an ordinary, vanilla javascript scrollbar. But if you’re building a scrolling website, or just want to experiment with your own unique scrollbar, then there’s no need to wait any longer.

Today I’m going to introduce you to letmescroll.js — a lightweight yet robust custom scrollbar in vanilla javaScript.

It contains NO dependencies, supports mobile devices, and works with native scroll events, which makes manipulation of any scrollbar possible. The scrollbar can be used in almost any application and can be customized quickly and easily.

The best part of this library is that it provides an appendTo method which allows you to append more items to the existing content when you reach the top or bottom of the scrollable container.

How to use it:

1. Insert the stylesheet letmescroll.css and JavaScript letmescroll.js into the document.

<link rel="stylesheet" href="css/letmescroll.css" />
<script src="js/letmescroll.js"></script>

2. Attach the function to the target scrollable container.

<div id="scrollable">
  ...
</div>

const demo = new LetMeScroll({
      selector: "#scrollable",
      config : {
        dimensions : {
          // width of the scrollable container
          width : "auto",
          // height of the scrollable container
          height : "300px"
        },
        scroll : {
          // bottom offset
          bottomOffset: 0,
          // auto hide on mouse leave
          autoHide: true
        }
      },
}

3. Override the default scrollbar styles:

:root {
  --lms_scrollbar_bg: #868686;
  --lms_scrollbar_radius: 5px;
  --lms_scrollpath_bg: transparent;
  --lms_scrollpath_radius: 5px;
}

4. Callback functions.

const demo = new LetMeScroll({
      onComplete: function(){},
      onEnd: function(){},
      onTop: function(){},
      onMove: function(){},
      onDragStart: function(){},
      onDragStop: function(){},
      onTouchStart: function(){},
      onTouchStop: function(){}
}

5. API methods.

// destroy the instance
demo.destroy();
// build a new instance
demo.build();
// refresh the scrollbar
demo.refresh();
// scroll to a specific position
demo.scrollTo(100);
// append new content
demo.appendTo({
  position: "afterbegin",
  items : {
    0: {
      content: 'New HTML Content'
    }
  }
});

Changelog:

v1.1.0 (02/07/2022)

• Added new methods
• Added new callbacks
• Added support for mobile callbacks
• Improved performance for mobile
• Code Update