title: How to scroll overflow:scroll div while dragging object?
body: <p>Let's say I have a draggable element with id <code>#draggable</code>. I also have a div that contains a list of droppable divs with id <code>#list</code>. But the container div is limited in height, so it can display only 3 droppable divs at once (A, B and C). That container div is set to <code>overflow:scroll</code>.</p>
  
  <p>How could I manage to get the container div to scroll when I'm dragging the <code>#draggable</code> element over it? Because right now I can't drop the element on last droppable elements that are hidden by the overflow (D, E, F, G).</p>
  
  <p><a href="https://jsfiddle.net/v80kppez/1/" rel="nofollow"><strong>See this fiddle for demo</strong></a></p>
  
  <pre><code>&lt;span id="draggable"&gt;draggable&lt;/span&gt;
  &lt;hr&gt;
  &lt;div style="height:200px;overflow:scroll"&gt;
    &lt;ul id="list"&gt;
      &lt;li&gt;A&lt;/li&gt;
      &lt;li&gt;B&lt;/li&gt;
      &lt;li&gt;C&lt;/li&gt;
      &lt;li&gt;D&lt;/li&gt;
      &lt;li&gt;E&lt;/li&gt;
      &lt;li&gt;F&lt;/li&gt;
      &lt;li&gt;G&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also, you can that if you drop the element <strong>under</strong> the <code>overflow:scroll</code> div, it actually drops on the hidden droppable divs!</p>
  
  <p>How to deal with those issues?</p>