0

ドラッグ可能な 2 番目の div ボックスにオーバーフロー スクロール/オート ボックスがある div に問題があります。私のデスクトップ PC では、外側のボックスをスクロールしようとすると、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;
}

アドバイスをいただきありがとうございます。

よろしくヤニック

4

1 に答える 1

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

よろしくお願いします

ヤニック

于 2013-11-11T09:39:52.103 に答える