Package Exports

dom-autoscroller

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dom-autoscroller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dom-autoscroller

Install

npm install --save dom-autoscroller

Usage

This example uses link-css, and dragula.

require('link-css')('../node_modules/dragula/dist/dragula.min.css');
var dragula = require('dragula'),
    autoScroll = require('dom-autoscroller');


var drake = dragula([document.querySelector('#list'), document.querySelector('#hlist')]);
var scroll = autoScroll([
        document.querySelector('#list-container'),
        document.querySelector('#container2')
    ],{
    margin: 20,
    pixels: 5,
    autoScroll: function(){
        //Only scroll when the pointer is down, and there is a child being dragged.
        return this.down && drake.dragging;
    }
});

Keep In Mind

dom-autoscroller exploits the simplicity of the single parent, to child relationship. A scrolling element with more than one children will likely not work well with dom-autoscroller.

For clarity here is a more complete example:

<!DOCTYPE html>
<html>
<head>
    <title>Drag test</title>
    <style>
    #list-container{
        /*The height produces the scroll bar.*/
        height: 100px;
        /*Make this scrollable.*/
        overflow-y: auto;
    }
    </style>
</head>
<body>
    <button id="scroll-button">Scroll List</button>
    <div id="list-container">
        <ol id="list" type="1">
            <li>zero</li>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
            <li>ten</li>
            <li>eleven</li>
            <li>twelve</li>
            <li>thirteen</li>
            <li>fourteen</li>
            <li>fifteen</li>
        </ol>
    </div>

    <script>
    //Load dragula's css.
    require('link-css')('../node_modules/dragula/dist/dragula.min.css');
    var dragula = require('dragula'),
        papyri = require('dom-autoscroller');


    var drake = dragula([document.querySelector('#list'), document.querySelector('#hlist')]);
    var scroll = autoScroll([
            document.querySelector('#list-container'),
            document.querySelector('#container2')
        ],{
        margin: 20,
        pixels: 5,
        autoScroll: function(){
            return this.down && drake.dragging;
        }
    });
    </script>
</body>
</html>

If you look at the last example notice the containers have only one child. In theory multiple children could work with dom-autoscroller, but the children scrolling might interfere with the workings of the library dragula.

Auto Scroller API

autoScroll(element|elements, options) -> instance

Create an auto scroller on an element, or and array of elements.

The element should have only one child element to work consistently.

options.margin = Integer

An inner area to detect when the pointer is close to the edge.

options.autoScroll = Function

A callback function used to determine if the element should scroll, or when the element should scroll.

Return a boolean value from this function to allow scrolling.

options.pixels = Integer

Set how many pixels per second you want to scroll during the auto scrolling action. More is smoother.

Auto Scroller Properties

down = Boolean

Is the pointer down?

point = Object

A reference to the pointer object.

Auto Scroller Methods

autoScroll

The function you set in the constructor options for options.autoScroll.

About

There are tons of reasons to have auto scrolling. The main one being sometimes a finger can't reach the mouse wheel comfortably. dom-autoscroller is a comfort module.

This is also a nice small module to do this kind of thing when auto scrolling is all you need.