soft-scroll
v0.1.0
Published
Scroll elements smoothly into view using CSS.
Downloads
2
Readme
soft-scroll
Online demo!
Introduction
soft-scroll is a small library for animating scrollable viewports using CSS.
Installation
npm install soft-scroll
Alternatively, just download and include soft-scroll.js
<script src="soft-scroll.js"></script>
Prerequisites
soft-scroll needs a wrapper element within the scrollable container to work:
container
└── wrapper
├── element 1
├── element 2
├── element 3
└── ..element n
Usage
function softScroll(
duration: number | ((distance: number) => number),
element?: Node | Event
): void { }
soft-scroll requires the animation duration and element to be scrolled into view:
softScroll(500, document.getElementById('target'));
Advanced usage
Currying
The target element may be omitted, in which case soft-scroll will return a function that accepts it:
const quickScroll = softScroll(500);
quickScroll(document.getElementById('target'));
This is especially is useful for binding event listeners:
document
.getElementById('target')
.addEventListener('click', softScroll(500));
In the case where an event is passed in as the second argument, soft-scroll will detect and use the target
property.
Relative duration
If the duration is a function, soft-scroll will call it and use the result. This function will receive the distance the container would travel as its first and only argument.
This is useful for making the container move at constant speed regardless of the distance traveled
const double = num => num * 2;
softScroll(double, document.getElementById('target'));
Limitations
soft-scroll currently only works with horizontal scrolling.