移动中的垂直滚动 - 页面

Question

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

情况如下：

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

需要能够像这样滚动： ---＆GT;

同时还可以在上面的座位表元素上捏缩放（并随后在缩放的元素上平移）。

元素本身运作完美。我正在使用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...

});