Scroll made easy!

Overview


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">
 
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.

// CSS ">
// 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
' } }, onComplete: function(){ } });">
demo.appendTo({
    position: "afterbegin",
    items : {
            0: {
                content: ''
            }
    },
    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
Comments
  • Where I can find the 'config' options?

    Where I can find the 'config' options?

    Hi, where I can find the 'config' options? Because based on my testings scrollbar can work without putting dimensions into config but it won't work without 'scroll : (...)'. Where I can find the list of parameters? And the ones that are needed and not needed?

    opened by wittywolk 4
  • Not enough content error

    Not enough content error

    Hello, my friend. Great tool, but when actual height of scrolling container > config.dimensions.height (when we have little content) , we get TypeError: Cannot set properties of undefined (setting 'opacity') from this code:

    var hideElement = this.hideElement = function hideElement(element, value) {
        element.style.opacity = value;
    }
    
    bug 
    opened by harryheman 2
  • No click on track allowed

    No click on track allowed

    Hello! Usually when I click on the track in the scrollbar, I am able to navigate to the direction I have clicked. This makes interaction more accessible. This could be configurable if needed.

    enhancement 
    opened by MartinMuzatko 2
  • Possible scrollbar_bg fix

    Possible scrollbar_bg fix

    When yellow is selected in the demo, there does not appear to be a yellow-tinted background in the scroll bar. If this is intended, please excuse me. But I thought I'd offer a quick fix in case you wanted it to be like the other colors

    opened by JonrGull 2
  • Selector config to accept CSS selector string. Entrance animation for scroll track. Relative scrolling method.

    Selector config to accept CSS selector string. Entrance animation for scroll track. Relative scrolling method.

    Hello, I have implemented your scrollbar and it is awesome!!

    I have 3 suggestions.

    A first suggestion in case someone needs to implement multiple scrollbars on the page and can't set individual IDs to be known beforehand will be to update the following lines:

    [37] this.selector = options.selector || defaults.selector;
    [271] let selectorElement = document.querySelector(this.selector);
    
    • as this enables developer to initialize the scroller by CSS selector string and not only by the ID, I have modified the file on my project and it works as a charm.

    Second suggestion: maybe adding an entrance animation to the .lms_scroll_track will help prevent some unwanted flickering when initially the scrollbar is display: none, something simple like:

    .lms_scroll_track{
        animation: appear .5s ease forwards;
    }
    @keyframes appear { from{ opacity: 0; } to{ opacity: 1; } }
    

    Third suggestion is to add a new method or second parameter (boolean) on the .scrollTo method for the scrolling amount to be relative to the current scroll position.

    var scrollEl = instance.mainElement.querySelector('.lms_content_wrapper');
    instance.scrollTo(scrollEl.scrollTop + 150);
    

    Besides that your code is splendid and also great job for reserving the native scrolling.

    opened by alexfain 1
Releases(v1.1.0)
  • v1.1.0(Feb 7, 2022)

    Release v1.1.0

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

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Feb 3, 2022)

    First Release v1.0.0

    Stable Version

    CSS Custom Properties

    • lms_scrollbar_bg
    • lms_scrollbar_radius
    • lms_scrollpath_bg
    • lms_scrollpath_radius

    Callbacks

    • onEnd
    • onTop
    • onMove
    • onDragStart
    • onDragStop

    Methods

    • destroy()
    • build()
    • refresh()
    • scrollTo()
    Source code(tar.gz)
    Source code(zip)
Owner
Bruno Vieira
“Make it work, make it right, make it fast.” – Kent Beck
Bruno Vieira
A simple and fast API to monitor elements as you scroll

scrollMonitor The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch

Stu Kabakoff 3.3k Jan 4, 2023
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Pete R. 9.6k Dec 31, 2022
Smooth WebGL Shader Transformations on Scroll

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll A handy setup to create a smooth scroll based GLSL animation using Three.js and GSA

Faboolea 97 Dec 25, 2022
Largetable - jQuery plugin to scroll in/maximize large tables

largetable jQuery plugin to scroll in/maximize large tables Usage Install with npm: $ npm install largetable Then include largetable files in the HTM

Edinum 1 Feb 3, 2021
🚀 Performance focused, lightweight scroll animation library 🚀

Sal Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies! Sal (Scroll Animatio

Mirek Ciastek 3.4k Dec 28, 2022
Animate elements as they scroll into view.

Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie

Julian Lloyd 21.2k Jan 4, 2023
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

lax.js Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. >> DEMO << What's new w

Alex Fox 9.4k Dec 29, 2022
▲ NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental)

nextjs-with-locomotive-scroll-example ?? NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental) ?? Demo ?? Getting started The

Bruno Silva 27 Dec 21, 2022
Better scroll event management using requestAnimationFrame.

Scroll Frame Better scroll event management using requestAnimationFrame. Install npm install @jamestomasino/scroll-frame Use const { addScrollListener

James Tomasino 2 Feb 12, 2022
🚀 Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies.

Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 21.7Kb.

Hieu Truong 11 Jun 20, 2022
Stellar.js - Parallax scrolling made easy

Stellar.js PLEASE NOTE: This project is no longer maintained. If parallax scrolling is something you care about, please apply to become a contributor

Mark Dalgleish 4.6k Dec 10, 2022
Scroll-stash - A JavaScript plugin to help preserve an element's scroll position.

scroll-stash A JavaScript plugin to help preserve an element's scroll position. CodePen Example Installation npm install scroll-stash JavaScript Impo

Sebastian Nitu 5 Sep 5, 2022
Scroll made easy!

Demo - Installation - Methods - Callbacks - Styling ◼️ Features: ?? Native Scroll Behavior ?? Standardized events / shortcuts / API ?? Fast & Lightwei

Bruno Vieira 307 Nov 20, 2022
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.

Waypoints Waypoints is a library that makes it easy to execute a function whenever you scroll to an element. var waypoint = new Waypoint({ element:

Caleb Troughton 10.3k Jan 4, 2023
Lightweight and easy to use vanilla js library to add css animations to elements on scroll.

Scrollrisen Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize Installation

null 1 Oct 13, 2022
An infinite scroll plugin for Vue.js.

Intro An infinite scroll plugin for Vue.js, to help you implement an infinite scroll list more easily. Features Mobile friendly Internal spinners 2-di

Peach 2.6k Jan 4, 2023
A simple and fast API to monitor elements as you scroll

scrollMonitor The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch

Stu Kabakoff 3.3k Jan 4, 2023
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Pete R. 9.6k Dec 31, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Smooth WebGL Shader Transformations on Scroll

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll A handy setup to create a smooth scroll based GLSL animation using Three.js and GSA

Faboolea 97 Dec 25, 2022