dom-autoscroller demo

The demo for dom-autoscroller author(s): Quentin Engles

HTML

<script src="https://unpkg.com/dragula/dist/dragula.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dragula/dist/dragula.css">
<script src="https://unpkg.com/dom-autoscroller/dist/dom-autoscroller.js"></script>
<script src="https://unpkg.com/dragula@3.7.2/dist/dragula.js"></script>
<p>A demonstration of using dom-autoscroller with the dragula library.<p>
<p>Drag the elements in the lists around. Holding the pointer (mouse/touch) near the edge of the element
makes the element scroll.</p>
<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>
<div id="container2">
    <ol id="hlist">
        <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>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ol>
</div>

CSS

body{
    background-color: #968096;
}
#list-container{
    background-color: green;
    cursor: default;
    overflow-y: auto;
    height: 100px;
    padding: 10px;
}
#list{
    padding: 10px;
    margin: 10px;
}
#container2{
    background-color: red;
    cursor: default;
    overflow-x: auto;
    width: 250px;
    padding: 20px;
    white-space: nowrap;
}
#hlist{
    padding: 10px;
    margin: 10px;

}
#hlist li{
    display: inline;
}
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}

JavaScript

var drake = dragula([document.querySelector('#list'), document.querySelector('#hlist')]);

var scroll = autoScroll([
        window,
        document.querySelector('#list-container'),
        document.querySelector('#container2')
    ],{
    margin: 20,
    autoScroll: function(){
        return this.down && drake.dragging;
    }
});