scroll-logic
v1.0.1
Published
A pure logic component for one-axis decelerated scrolling
Downloads
2
Readme
ScrollLogic
This project is based on zynga/scroller which was not maintained any longer. This repo does not have much in common with the original though. It's a radically stripped down and optimized version which serves only one purpose.
It's a pure logic component for one-axis decelerated scrolling, imitating the way mobile devices do native scrolling. No render loop, no zooming, no snapping, no paging. It only serves a single purpose: providing the most accurate and high-performance backbone for your scrolling needs. It does not seem very useful on it's own, but I needed exactly that for [enter project name as soon as it's public ;)]. Since scroll-logic does not contain any rendering loop, it does not do anything unless you request something from it (see getOffset
below).
Usage
npm install scroll-logic
for usage with browserify or use the window.ScrollLogic
global.
//Only if you're using browserify.
var ScrollLogic = require('scroll-logic');
var scrollLogic = new ScrollLogic({
//true by default.
bouncing: false,
//0 by default, but that doesn't make much sense.
containerLength: 800,
contentLength: 23000
});
//Set the length of the container and the scrollable content in pixels.
//ScrollLogic doesn't care if you do vertical or horizontal scrolling.
scrollLogic.setContainerLength(containerLength);
scrollLogic.setContentLength(contentLength);
//Get the scroll offset as integer.
//Can be negative or larger than (contentLength - containerLength) if bouncing is enabled.
//ScrollLogic doesn't do ANYTHING unless you query the offset. There's no animation loop or any computation going on.
var offset = scrollLogic.getOffset();
//Stop any deceleration that may be "running" and jump to the new position.
//The next `getOffset` call will return this position.
scrollLogic.setOffset(newOffset);
//Start a new interaction with the scrollable content.
//Usually this would be called on `touchstart`.
scrollLogic.beginInteraction(offset, timestamp);
//Once you've started a new interaction, you can add interactions.
//Usually this would be called on `touchmove`.
//This is a noop if there is no active interaction created using beginInteraction.
scrollLogic.interact(offset, timestamp);
//Ends the current interaction. Usually this would be called on `touchend` or `touchcancel`.
scrollLogic.endInteraction(offset, timestamp);