从屏幕上的任何位置在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

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