手机上的垂直滚动 - 页面中的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... 

});