手機上的垂直滾動 - 頁面中的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... 

});