title: Auto-Scroll while dragging an item with Perfect-Scrollbar and SortableJs
body: <p>Is it possible to make <a href="https://github.com/utatti/perfect-scrollbar" rel="nofollow noreferrer">perfect-scrollbar</a> automatically scroll up/down while dragging an item in the edge its container? In this case for the drag &amp; drop, I'm using <a href="https://github.com/SortableJS/Sortable" rel="nofollow noreferrer">SortableJS</a>.</p>
  
  <p>To reproduce my use case try to drag the Item 1 to the end of the list (after Item 8): <a href="https://jsfiddle.net/hfalucas/fwzcse9k/5/" rel="nofollow noreferrer">https://jsfiddle.net/hfalucas/fwzcse9k/5/</a></p>
  
  <p>In the first list, you can not drag the item, because the scroll doesn't move at all</p>
  
  <pre><code>// js file
  var ps = new PerfectScrollbar('.container');
  
  
  Sortable.create(list, {
    animation: 150,
  });
  
  
  // httml
  &lt;div id="coisas" class="container"&gt;
    &lt;div id="list" class="list-group content"&gt;
        &lt;div class="list-group-item"&gt;1&lt;/div&gt;
        &lt;div class="list-group-item"&gt;2&lt;/div&gt;
        &lt;div class="list-group-item"&gt;3&lt;/div&gt;
        (...)
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the second list and using the browser native scroll it works perfectly</p>
  
  <pre><code>Sortable.create(listOne, {
      animation: 150,
  });
  
  
  // httml
  &lt;div id="cenas" class="container"&gt;
    &lt;div id="listOne" class="list-group content"&gt;
        &lt;div class="list-group-item"&gt;1&lt;/div&gt;
        &lt;div class="list-group-item"&gt;2&lt;/div&gt;
        &lt;div class="list-group-item"&gt;3&lt;/div&gt;
        (...)
    &lt;/div&gt;
  &lt;/div&gt;
  
  //css
  #cenas {
    margin-top: 10px;
    position: relative;
    width: 480px;
    height: 206px;
    overflow-y: scroll;
  }
  </code></pre>