1

単一の div を除いて、iPhone のページでデフォルトのスクロール アクションを防止したいと考えています。基本的に、誰かが画面上 (画面上の任意の場所) で指をスワイプすると、この 1 つの div が移動するはずです。私が使用しているコードは、誰かが div 要素に直接触れている場合は正常に動作しますが、それ以外の場合、div の位置はかなり不安定です。私はどこを台無しにしていますか？これは、私がSafari Developer Libraryで見つけたものを大まかに変更したものです。

<div id="testdiv">
   test test test test
</div>
<script type="text/javascript">
        var startY = document.getElementById("testdiv").offsetTop;
        var curY = startY;
        var touchY;

        document.addEventListener('touchstart', function(event) {
            touchY = event.targetTouches[0].pageY;
        }, false);

        document.addEventListener('touchmove',function(event) {
            event.preventDefault();
            curY = event.targetTouches[0].pageY - startY - touchY;
            document.getElementById("testdiv").style.webkitTransform = 'translate(0px,' + curY + 'px)';
        }, false);

        document.addEventListener('touchend',function(event) {
            startY = curY;
        }, false);
</script>
4

1 に答える 1

3

の値を変更- startYする+ startY場合はに変更しますcurY。問題は、divに触れたときにのみ機能するということではありませんでした。の値は...pageY - touchY、タッチが最初に記録されてから移動した距離になります。前のオフセットが50ピクセルで、20ピクセル下に移動した場合、新しいオフセットを20 −50ではなく20+ 50にする必要があります。の初期値startYが近いため、最初のタッチで問題に気付くことはありませんでした。実際には、変換は開始オフセットを基準にして適用されるため、の初期値はdivの値でstartYはなく、0である必要があります。offsetTop

于 2011-05-03T05:17:39.193 に答える