從屏幕上的任何位置在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，因爲翻譯將相對於起始偏移應用。