Ok, this is a tricky problem but there's a little bit of 'hack' that we can do. It's a simple method.
To summarize your issue, you need overflow-y:scroll
in your container holding the draggable, while you keep overflow-x:hidden
. But, when you drag, the element still spreads across the container like as if the overflow-x
had no effect. So here's what we do:
1) We describe the overflow-y:scroll
property on DOM:
$(document).ready(function(){
$('.sidebar').css('overflow','scroll');
});
We can't put this directly on the CSS because we are going to be changing this value later and the CSS default property overrides it.
2)
$('.panel-body').mousedown(function(){
$('.sidebar').css('overflow-y','');
});
This means, when we select a draggable element (while the mouse is still down), we will hide the vertical scroll, that means both overflow
won't be true. This is the important part, we know that removing overflow-y
totally solves the issue but we need a vertical scrollbar. So we hide it only when an element is selected.
3)
$('.panel-body').mouseup(function(){
$('.sidebar').css('overflow-y','scroll');
});
Once we have placed the draggable element in the place we wanted it to be, we put our vertical-scrollbar back.
That's it, this may not be a smooth solution since it's only a workaround.
You can have a look at how it works here:
DEMO (updated)