javascript - 移动设备上的垂直滚动 - 页面中的hammer.js 元素

Question

有一百万个类似的问题，但我找不到适合我的答案。

情况如下:

我有一个 HTML 页面，该页面中有一个我正在使用 Hammer.js 的元素。

需要能够像这样滚动: --->

同时还能够在上面的座位表元素上进行捏合缩放(然后平移该缩放元素)。

该元素本身运行良好。我正在使用 doubletap、pinch、pinchend、pan 和 panend它。

现在，如果该元素完全缩小(因此我正在跟踪比例)，我希望在移动浏览器上使用它时整个页面滚动(又名手指将向上拖动页面)。

此时我已经尝试了几乎所有的方法。我似乎无法让它手动滚动到特定位置(我尝试设置 window.scrollTop 并使用 window.scrollTo() 但没有结果)。

如果有人能给我指明正确的方向，我会在接下来的……比如说……13天里崇拜你和你的家人。哎呀，甚至可能是 14。

TL;DR- 我们是否对元素进行了缩放？如果是这样，请高兴地围绕该元素进行平移!- 我们是否完全缩小/缩小了元素？如果是这样，移动用户应该能够像平常一样滚动页面!

谢谢克里斯

Answer 1

您可以尝试window.scrollTo来“模拟”正常滚动。就像这样:

var currentScroll = 0;
var currentScale  = 1; //"fully zoomed out" state

hammer.on("panstart", function (ev) {
  currentScroll = window.scrollY;
});

hammer.on("pan", function(ev) {
  if (currentScale == 1) {
    //abort pan and scroll window instead
    window.scrollTo(0, currentScroll + ev.deltaY * -1);
    return;
  }

  //do stuff with pan here...

});