Horizontal scrolling issue using angularjs-dragula

Question

I am using angularjs-dragula and I am not able to auto scroll to the overflow container that is hidden from the screen.

This is my issue:
I have five containers in my dragula and the 5th container is hidden from the screen. Now I want to drag an element from the first container and drop it in the 5th container. But I am not able to do this, since the screen is not auto scrolling to the 5th container.

Does angularjs-dragula support vertical scrolling? or is there a property that I'm missing?

Example Plunkr : https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview

var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
    dragulaService.options($scope, 'fifth-bag', {
        copy: true
    });
});

Answer 1

It seems like this option is not implemented in Dragula. Dragula's developer suggests to use the module dom-autoscroller.

See this issue on Github: https://github.com/bevacqua/dragula/issues/121

To implement this functionality with AngularJS:

1) Download dom-autoscroller from the official repo: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js

2) Include it in your project folder

3) Enable autoscroll in your controller:

// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
    document.querySelector('.list')
], {
    margin: 30,
    maxSpeed: 10,
    scrollWhenOutside: true,
    autoScroll: function () {
        //Only scroll when the pointer is down
        return this.down
    }
});