Horizonal & Vertical Smooth Scroll With Easing – easy-scroll

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.