Take a look at this code :
HTML
<div class="draggable_main_container">
<div class="draggable_container">
<div class="draggable">
<div class="minus">
label
</div>
</div>
</div>
</div>
CSS
.draggable_main_container
{
width:134px;
overflow:auto;
position:relative;
height:350px;
}
.draggable_container
{
height:300px;
position:relative;
overflow:visible;
background-color:blue;
}
.draggable
{
background-color:red;
height:134px;
width:134px;
cursor:pointer;
position:relative;
}
.draggable .minus
{
position:absolute;
left:50px;
bottom:-20px;
width:32px;
height:20px;
background-color:yellow;
}
jQuery
$(".draggable").draggable({
axis: "y",
containment: 'parent'
});
In Firefox, everything runs smoothly. However, in Chrome and Safari, there seems to be an issue when the draggable element reaches the bottom of the container.
If I click and scroll back down again, the div moves beyond the container's boundaries. This results in scroll bars appearing once the main container's height (350px) is reached.
To prevent the appearance of scroll bars, adding overflow:visible; to draggable_main_container is a quick fix.
But what I really need is for the draggable element to stop moving when it reaches the bottom of its parent container. How can I achieve this?
I suspect that the culprit might be the absolute positioning of the .minus element attached to the draggable item. Removing it seems to resolve the problem...