Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BMSVieira/letmescroll.js
Scroll made easy!
https://github.com/BMSVieira/letmescroll.js
javascript scroll scroll-plugins scrollbar vanillajs
Last synced: about 1 month ago
JSON representation
Scroll made easy!
- Host: GitHub
- URL: https://github.com/BMSVieira/letmescroll.js
- Owner: BMSVieira
- License: mit
- Created: 2022-01-31T00:35:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-03-14T21:09:21.000Z (over 2 years ago)
- Last Synced: 2024-05-28T13:31:41.673Z (4 months ago)
- Topics: javascript, scroll, scroll-plugins, scrollbar, vanillajs
- Language: JavaScript
- Homepage:
- Size: 2.07 MB
- Stars: 315
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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.
```javascript
```
2 - Include Styles.
```javascript
```
3 - Set HTML.
```html
```
4 - Initilize.
```javascript
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.
```html
// Javascript
// CSS
```
◼️ Methods:
-
destroy:
Destroy current scrollbar and unbind all its events
```javascript
demo.destroy();
```
build:
Build new LetMeScroll
```javascript
demo.build();
```
refresh:
Refresh current scrollbar
```javascript
demo.refresh();
```
scrollTo:
Scroll to specific location (px)
Type | Description |
| --- | --- |
| `int` | Jump to specific location in the container |
```javascript
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 |
```javascript
demo.appendTo({
position: "afterbegin",
items : {
0: {
content: ''
}
},
onComplete: function(){
}
});
```
◼️ Callbacks:
-
There are multiple callbacks you can use when building a new instance.
```javascript
// Called when LetMeScroll is initialized
onComplete: function(){ }
```
```javascript
// Called when scrollbar reaches the bottom.
onEnd: function(){ }
```
```javascript
// Called when scrollbar reaches the top
onTop: function(){ }
```
```javascript
// Called everytime scrollbar moves
onMove: function(){ }
```
```javascript
// Called when Drag starts
onDragStart: function(){ }
```
```javascript
// Called when Drag Stops
onDragStop: function(){ }
```
Mobile Only
```javascript
// Called when Touch starts
onTouchStart: function(){ }
```
```javascript
// Called when Touch Stops
onTouchStop: function(){ }
```
◼️ API > Gets:
-
```javascript
// 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`|