how to disable draggable div when scroll bar is focused on in jQuery

Question

I have a jQuery draggable container div with a side scroll bar that should not be draggable when I am scrolling up and down. .infotext is the inner div that has the text, contained within #infobody which is set to overflow:auto. I need a way to negate the draggable function on the div when the scrollbar is selected. Here is my code:

$(".lsidebar").draggable({"scroll":false});

 .lsidebar #infobody{
cursor:default;
position:absolute;
width:100%;
overflow:auto;
margin:23px 0 0 0;
z-index:14;
}

   #infobody .infotext{
cursor:default;
position:relative;
width:100%;
z-index:14;
color:#969696;
}

Answer 1

Actually you can use "cancel" property in draggable to prevent the scrolling event affect to the draggable element.

For example:

if your html is like this...

<div class="draggable">
    <div class="scrollable"></div>
</div> 

for the js:

$('.draggable').draggable({
   cancel: '.scrollable'
});

When you scrolling in that specific area, the outer draggable element will be temporary disabled.