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.

Keywords

FAQs

What is dom-autoscroller?

Is dom-autoscroller popular?

Is dom-autoscroller well maintained?

Package last updated on 24 Nov 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

dom-autoscroller