在带有溢出的框中没有通过触摸滚动:在可拖动框中滚动/自动

no scrolling via touch in a box with overflow: scroll / auto in a draggable box

本文关键字：滚动 拖动 自动 溢出 触摸      更新时间：2023-09-26

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

此致敬意

雅尼克

相关文章：