Author: | tarun-dugar |
---|---|
Views Total: | 1,465 views |
Official Page: | Go to website |
Last Update: | May 17, 2020 |
License: | MIT |
Preview:

Description:
An easy and lightweight smooth scroll library that smoothly scrolls to top/right/bottom/left within your page or a specific container.
How to use it:
Install and import the easy-scroll package.
# NPM $ npm install easy-scroll --save
import easyScroll from 'easy-scroll';
Or from the CDN.
<script src="https://unpkg.com/easy-scroll"></script>
Initialize the easyScroll and define the required duration, direction, scrollable element options as follows:
- scrollableDomEle: scrollable element
- duration: duration of scrolling
- direction: top/right/bottom/left
easyScroll({ 'scrollableDomEle': window, 'duration': 3000, 'direction': 'bottom' });
Add an easing function to the scroll animation. Available easing effects: linear(default), easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint.
easyScroll({ 'scrollableDomEle': window, 'duration': 3000, 'direction': 'bottom', 'easingPreset': 'easeInQuart' });
Define a bezier curve.
easyScroll({ 'scrollableDomEle': window, 'duration': 3000, 'direction': 'bottom', 'cubicBezierPoints': { 'x1': Number(>= 0 and <= 1), 'y1': Number, 'x2': Number(>= 0 and <= 1), 'y2': Number } });
Specify the scroll amount in pixels. Defaults to 0 which means the page or scrollable element will be scrolled to the end.
easyScroll({ 'scrollableDomEle': window, 'duration': 3000, 'direction': 'bottom', 'scrollAmount': 100 });
Perform an action when the animation is completely finished.
easyScroll({ 'scrollableDomEle': window, 'duration': 3000, 'direction': 'bottom', 'onAnimationCompleteCallback': function() { alert('done') } });
Execute a function on each tick of the scroll.
easyScroll({ 'scrollableDomEle': window, 'duration': 3000, 'direction': 'bottom', 'onRefUpdateCallback': function() { // do something } });
Changelog:
v0.7.0 (05/17/2020)
- Update
05/17/2019
- Fixed Scrolling was not working as expected for the directions left and top prior to this version.