Author: | BMSVieira |
---|---|
Views Total: | 415 views |
Official Page: | Go to website |
Last Update: | February 7, 2022 |
License: | MIT |
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