javascript - 在有溢出的框中不通过触摸滚动：在可拖动框中滚动/自动

Question

我在第二个可拖动的 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;
}

提前感谢您的建议。

问候亚尼克

Answer 1

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

我已经实现了盒子本身的触摸滚动。

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

此致

亚尼克