从屏幕上的任何位置滚动 iPhone 上的 div

Question

我想在 iPhone 上阻止我的页面上的默认滚动操作，但单个 div 除外。基本上，当有人在屏幕上滑动手指时——屏幕上的任何地方——这个单个 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>

Answer 1

在更改curY 的值时将- startY 更改为+ startY。问题不在于它仅在您触摸 div 时才有效。 ...pageY - touchY 的值将是自首次记录以来触摸移动的距离。如果之前的偏移量是 50 像素并且向下移动了 20 像素，那么您希望新的偏移量为 20 + 50，而不是 20 - 50。您在第一次触摸时没有注意到问题，因为初始值为 @987654325 @ 接近于 0。实际上，startY 的初始值应该是 0，而不是 div 的 offsetTop，因为平移会相对于起始偏移量应用。