移动设备上的垂直滚动-页面中的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...

});