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，而不是div的startY，因为转换将相对于起始偏移量应用。

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

1 个答案: