Get new jQuery plugins just once a week

×

FTscroller

FavoriteLoadingAdd to favorites

July 13, 2015

FTScroller | Javascript library for momentum scrolling

FTScroller is a cross-browser Javascript/CSS library to allow touch, mouse or scrollwheel scrolling within specified elements, with pagination, snapping and bouncing support.

Created by FT Labs

Download

Example

Ftscroller library

momentum scrolling

FTScroller

FTScroller is a library for adding momentum scrolling to web content on devices with a touch interface, compatible across most modern platforms including desktop browsers. Although recently support for overflow: scroll (or touch equivalents) has increased, this is often still not implemented in a cross-platform or backwards-compatible way, and with no support for features like snapping.

FTScroller is developed by FT Labs, part of the Financial Times. It is inspired by Touchscroll and Zynga Scroller, but is a complete rewrite. It is extensively used in the FT Web App, and was developed to achieve better performance and compatibility, including mouse and touch input.

Usage

Include ftscroller.js in your JavaScript bundle or add it to your HTML page like this:

<script type='text/javascript' src='/path/to/ftscroller.js'></script>

The script must be loaded prior to instantiating a scroller on any element of the page.

To create a scroller, with a few minimal options:

var containerElement, scroller;

containerElement = document.getElementById('scrollcontainer');

scroller = new FTScroller(containerElement, {
    scrollbars: false,
    scrollingX: false
});

Examples

FTScroller is designed to accommodate a range of use cases. Here are some examples - feel free to copy the code and use as the basis for your own projects.

Options

Options must be specified at create-time by passing a JSON object as the second argument to the FTScroller constructor.

Public interface

Once the scroller has been applied to an element, the return value from the constructor is an object that offers a number of public properties, methods and events.

Properties

Methods

Prototype methods

Events

Events can be bound with the addEventListener method. Events are fired syncronously. Regardless of the event, the listener function will receive a single argument.

Compatibility

FTScroller supports input via mouse or touch on the following browsers:

Tips and tricks

Credits and collaboration

The lead developer of FTScroller is Rowan Beentje at FT Labs. All open source code released by FT Labs is licenced under the MIT licence. We welcome comments, feedback and suggestions. Please feel free to raise an issue or pull request. Enjoy.

FTscroller

Related posts:

Stellar-js
Scrolltab
roll-js

To install using Bower
bower install ftscroller

Ftscroller library

http://jquer.in/wp-content/uploads/2015/07/Ftscroller.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever