Help needed: Issue with scrolling inner div within draggable outer div.
I am facing an issue where I am unable to scroll the inner box properly on my iPad. The problem arises when I try to scroll the inner box, and the outer box starts moving instead.
I am using the jQuery UI library for the draggables.
For reference, you can check out this example:
HTML:
<div id="outer">
<div id="inner">
A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H
</div>
</div>
JS:
$('#outer').draggable();
CSS:
#outer{
position: fixed;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid black;
}
#inner{
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid red;
}
Your help and advice are highly appreciated. Thank you in advance!
Best regards, yannic