4

GitHub - BMSVieira/letmescroll.js: Scroll made easy!

 2 years ago
source link: https://github.com/BMSVieira/letmescroll.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Demo - Installation - Methods - Callbacks - Styling

black_medium_square Features:

  • wrench Native Scroll Behavior
  • hammer_and_wrench Standardized events / shortcuts / API
  • stars Fast & Lightweight
  • muscle No dependencies, built with VanillaJS
  • earth_americas Tested in all modern browsers
  • paintbrush Easy Customization

black_medium_square Demo:

https://bmsvieira.github.io/letmescroll.js/

black_medium_square 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
           }
     }
   });
});

black_medium_square 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);

black_medium_square Callbacks:

There are multiple callbacks you can use when building a new instance.

// 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 --> }

black_medium_square 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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK