Jquery UI Sortable - Div scroll issue

jquery, jquery-ui, jquery-ui-sortable

Solution

Change your style sheet like this:

.scroll {
    border: 1px solid red;
    height: 200px;
    overflow: auto;
    position: static;
    width: 150px;
}

And use this code upper of your `ul`:

<div style="overflow:hidden;width:150px;height:200px;position:relative">

Problem

I created a Demo here. Code: //Javascript ``` $(function() { $("#panel").sortable({ items: ".content", axis:"y", scroll:true, }).disableSelection(); }); ``` //HTML ``` <ul id="panel" class="scroll"> <li class="content" style="background-color:red">item1</li> <li class="content" style="background-color:green">item2</li> <li class="content" style="background-color:blue">item3</li> <li class="content" style="background-color:gray">item4</li> <li class="content" style="background-color:yellow">item5</li> <li class="content" style="background-color:green">item6</li> <li class="content" style="background-color:yellow">item7</li> <li class="content" style="background-color:red">item8</li> </ul> ``` //CSS ``` .scroll{ overflow:scroll; border:1px solid red; height: 200px; width: 150px; position:relative; } .content{ height: 50px; width: 100%; } ``` 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. So, is there any way to prevent it from scrolling down long?

Original source