Javascript Jquery，触摸事件，如何滚动对象'；s偏移顶部更快（速度速率）_Javascript_Jquery

Javascript Jquery，触摸事件，如何滚动对象'；s偏移顶部更快（速度速率）

javascript jquery

Javascript Jquery，触摸事件，如何滚动对象'；s偏移顶部更快（速度速率）,javascript,jquery,Javascript,Jquery,我使用javascript触摸事件更改对象的偏移顶部。它可以像滚动移动一样工作，但我希望滚动速度更快（例如：双倍/三倍速度），如何处理代码 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, us

我使用javascript触摸事件更改对象的偏移顶部。它可以像滚动移动一样工作，但我希望滚动速度更快（例如：双倍/三倍速度），如何处理代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
      .box{
        width: 50px;
        height: 50px;
        background-color: #111;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="box"></div>
    <script>
      $(function () {
        var $window = $(window);
        var $box = $('.box');
        var objOffsetX;
        var moveOffsetX;
        $window.on('touchstart', function (event) {
          event.preventDefault();
          var touch = event.originalEvent.touches[0];
          objOffsetX = $box.offset().top;
          moveOffsetX = objOffsetX - touch.pageY;
        });
        $window.on('touchmove', function (event) {
          event.preventDefault();
          var touch = event.originalEvent.touches[0];
          var positionX = touch.pageY + moveOffsetX ;
          $box.offset({top:positionX});
        });
      });
    </script>
  </body>
</html>


.盒子{
宽度：50px；
高度：50px；
背景色：#111；
}
$（函数（）{
变量$window=$（window）；
变量$box=$（'.box'）；
var objOffsetX；
var moveOffsetX；
$window.on（'touchstart'，函数（事件）{
event.preventDefault（）；
var touch=event.originalEvent.touch[0]；
objOffsetX=$box.offset（）.top；
moveOffsetX=objOffsetX-touch.pageY；
});
$window.on（'touchmove'，函数（事件）{
event.preventDefault（）；
var touch=event.originalEvent.touch[0]；
变量位置x=touch.pageY+moveOffsetX；
$box.offset（{top:positionX}）；
});
});

您可以使用动画

  $("HTML, BODY").animate({ scrollTop: positionX }, 1000); }); });

好的，从我的理解来看，我的假设是正确的，但是当你从另一个角度开始拖拽的时候，出现了一个问题。以下是您需要的：

$（函数（）{
//在这里设置所需的速度倍增器。
//1表示它将以相同的速度跟随您的移动。
var乘数=2；
变量$window=$（window）；
变量$box=$（'.box'）；
var objOffsetX；
var moveOffsetX；
var initialPageY；
$window.on（'touchstart'，函数（事件）{
event.preventDefault（）；
var touch=event.originalEvent.touch[0]；
objOffsetX=$box.offset（）.top；
moveOffsetX=objOffsetX-touch.pageY；
initialPageY=touch.pageY；
});
$window.on（'touchmove'，函数（事件）{
event.preventDefault（）；
var touch=event.originalEvent.touch[0]；
var positionX=touch.pageY*乘数-initialPageY*（乘数-1）+moveOffsetX；
$box.offset（{top:positionX}）；
});
});
.box{
宽度：50px；
高度：50px；
背景色：#111；
}

我不确定是否正确。这就是你的意思：var positionX=touch.pageY*2+moveOffsetX？我尝试了这个代码，速度更快，但是当我在不同的位置触摸start时，box对象的位置跳到了另一个位置，它有一个bug。可能尝试添加var I=0；低于var moveOffsetX；并在“touchstart”函数中添加i++，然后var positionX=touch.pageY+moveOffsetX+i；可能重复感谢Mark的回答，我尝试了这段代码，但仍然不起作用，框速度与鼠标相同，每次触摸开始时只增加1px。感谢您的回答，但我想通过触摸事件移动$（'.box'），速度更快，而不是HTML滚动动画更快。