javascript - 在有溢出的框中无法通过触摸滚动:在可拖动的框中滚动/自动

我在具有可拖动的第二个div框中的溢出滚动/自动框的div中遇到问题。
在台式机上，尝试滚动外框移动时，可以在iPad上滚动内框而不会出现问题。

我使用jQuery UI库中的可拖动对象

这是一个例子：

http://jsfiddle.net/3rfjB/1/

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;
}

预先感谢您的建议。

问候
扬尼克

最佳答案

我找到了解决问题的方法：

我可以触摸一下实现的框本身。

var TOUCH_MOVE_TEST_X = undefined;
var TOUCH_MOVE_TEST_Y = undefined;

$('#inner').bind('touchstart', function(event){

    TOUCH_MOVE_TEST_X = event.originalEvent.touches[0].clientX;
    TOUCH_MOVE_TEST_Y = event.originalEvent.touches[0].clientY;

    return false;
});

$('#inner').bind('touchmove', function(event){

    event.srcElement.offsetParent.offsetParent.scrollLeft = event.srcElement.offsetParent.offsetParent.scrollLeft + ( TOUCH_MOVE_TEST_X - event.originalEvent.touches[0].clientX );
    TOUCH_MOVE_TEST_X = event.originalEvent.touches[0].clientX;

    event.srcElement.offsetParent.offsetParent.scrollTop = event.srcElement.offsetParent.offsetParent.scrollTop + ( TOUCH_MOVE_TEST_Y - event.originalEvent.touches[0].clientY );
    TOUCH_MOVE_TEST_Y = event.originalEvent.touches[0].clientY;

    return false;
});
$('#inner').bind('touchend', function(event){

    TOUCH_MOVE_TEST_X = undefined;
    TOUCH_MOVE_TEST_Y = undefined;

    return false;
});

最好的祝福

扬尼克