title: Jquery UI Sortable - Div scroll issue
body: <p>I created a Demo <a href="http://jsfiddle.net/Fnncs/103/" rel="nofollow">here</a>.</p>
  
  <p><strong>Code:</strong></p>
  
  <p>//Javascript</p>
  
  <pre><code>$(function() {
      $("#panel").sortable({
          items: ".content",
          axis:"y",
          scroll:true,
      }).disableSelection();
  
  });
  </code></pre>
  
  <p>//HTML</p>
  
  <pre><code>&lt;ul id="panel" class="scroll"&gt;
      &lt;li class="content" style="background-color:red"&gt;item1&lt;/li&gt;
      &lt;li class="content" style="background-color:green"&gt;item2&lt;/li&gt;
      &lt;li class="content" style="background-color:blue"&gt;item3&lt;/li&gt;
      &lt;li class="content" style="background-color:gray"&gt;item4&lt;/li&gt;
      &lt;li class="content" style="background-color:yellow"&gt;item5&lt;/li&gt;
      &lt;li class="content" style="background-color:green"&gt;item6&lt;/li&gt;
      &lt;li class="content" style="background-color:yellow"&gt;item7&lt;/li&gt;
      &lt;li class="content" style="background-color:red"&gt;item8&lt;/li&gt;    
  &lt;/ul&gt;
  </code></pre>
  
  <p>//CSS</p>
  
  <pre><code>.scroll{
      overflow:scroll;
      border:1px solid red;
      height: 200px;
      width: 150px;
      position:relative;
  }
  .content{
      height: 50px;
      width: 100%;
  }
  </code></pre>
  
  <p>In that,When i drag the any box towards down ,it scrolls very long and move out of other boxes.
  But when i drag any box towards up, it works correctly.</p>
  
  <p>So, is there any way to prevent it from scrolling down long?</p>