vanilla.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers. It is based on jQuery.kinetic
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
.gitignore
LICENSE
demo-vanilla.html
readme.mkd
vanilla.kinetic.js removed requestAnimationFrame polyfill Jan 30, 2016

readme.mkd

vanilla.kinetic

Dave Taylor http://davetayls.me Jacek Nowacki http://jacek-nowacki.net/ The MIT License (MIT)

Note from Dave:

This code has been pretty stable for a while (with it's few restrictions) and so am not actively making changes. If you want to improve it in any way feel free to submit a pull request (with tests) and we will merge in any that make sense and don't add bloat to what is a simple plugin.

Note from me:

As plugin seemed pretty stable, but I needed no-dependency version - I removed all jQuery stuff and replaced it with Vanilla calls. I'll try to follow updates from original project, but I cannot guarrante it. Feel free to make a PR if needed.

vanilla.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers. It is based on jQuery.kinetic.

Installation

<!-- polyfills if needed extended support, I recoomend http://polyfill.io/ -->
<script src="vanilla.kinetic.js"></script>

Compatibility

This plugin works with every browser supporting (natively or via polyfills) requestAnimationFrame, classList and addEventListener.

Browsers

  • ie: 10+ (7+)
  • firefox: 23+ (3.6+)
  • chrome: 24+ (13+)
  • safari: 6.1+ (5+)
  • iOS Safari: 7.1+ (4+)

Polyfills may lower the version needed to the one specified inside brackets. These informations should be correct, but I did not verify it.

Demos

@TODO Put demo online Demo included in repository (demo-vanilla.html)

Filtering Clickable elements

If you need to allow events to be passed through the wrapper. For example to allow clicking on a link or an input then you can use filterTarget like so.

new VanillaKinetic(document.getElementById('wrapper'), {
    filterTarget: function(target, e){
        if (!/down|start/.test(e.type)){
            return !(/area|a|input/i.test(target.tagName));
        }
    }
});

Options

cursor          {string}    default: move   Specify the cursor to use on the wrapper
slowdown        {number}    default: 0.9    This option affects the speed at which the scroll slows
threshold       {number|function(target, e)}    default: 0   This is the number of pixels the mouse needs to move before the element starts scrolling
x               {string}    default: true   Toggles movement along the x axis
y               {string}    default: true   Toggles movement along the y axis
maxvelocity     {number}    default: 40     This option puts a cap on speed at which the container
                                            can scroll
throttleFPS     {number}    default: 60     This adds throttling to the mouse move events to boost
                                            performance when scrolling
triggerHardware {boolean} false             This adds css to the wrapper which
                                            will trigger iOS to use hardware acceleration
invert          {boolean}   default: false  Invert movement direction

filterTarget    {function(target)}          Return false from this function to
                                            prevent capturing the scroll

movingClass     {object}
    up:         {string}    default: 'kinetic-moving-up'
    down:       {string}    default: 'kinetic-moving-down'
    left:       {string}    default: 'kinetic-moving-left'
    right:      {string}    default: 'kinetic-moving-right'

deceleratingClass {object}
    up:         {string}    default: 'kinetic-decelerating-up'
    down:       {string}    default: 'kinetic-decelerating-down'
    left:       {string}    default: 'kinetic-decelerating-left'
    right:      {string}    default: 'kinetic-decelerating-right'

Listeners:  All listeners are called with:
            - this = the instance of the Kinetic class

moved       {function()}           A function which is called on every move
stopped     {function()}           A function which is called once all
                                           movement has stopped
selectStart {function()}           A function which is called on user try to drag (select text),
                                           return false to prevent selection when dragging

Methods:    You can call methods by running the kinetic plugin
            on an element which has already been activated.

            eg  DOM_element.kinetic(); // activate
                DOM_element._VanillaKinetic.methodname(options);

start       Start movement in the scroll container at a particular velocity.
            This velocity will not slow until the end method is called.

            The following line scrolls the container left.
            DOM_element._VanillaKinetic.start({ velocity: -30 });

            The following line scrolls the container right.
            DOM_element._VanillaKinetic.start({ velocity: 30 });

            The following line scrolls the container diagonally.
            DOM_element._VanillaKinetic.start({ velocity: -30, velocityY: -10 });

end         Begin slowdown of any scrolling velocity in the container.
            DOM_element._VanillaKinetic.end();

stop        Stop the scrolling immediately

detach      Detach listeners and functionality from the wrapper
            NOTE: This won't destroy the associated data, such method is currently
            in @TODO state

attach      Re-attach listeners and functionality previously detached using
            the detach method

Add your own methods

@TODO

Hack the core

@TODO

Words about tests

Any testing-related stuff is currently removed. Sorry about that.

Changes

2.2.1.1v

  • First vanillaJS-based version released
  • Possible updates will follow original repo numbering

2.2.1 and below