ios - 如何在不滚动页面的情况下在 iOS 上使用 HammerJS 捏合手势？

Question

我正在使用 Ember-Gestures它在 Cordova 应用程序中实现 Hammer.js 以实现一些简单的手势控制。

我遇到了一个主要问题，即任何触发动画的手势(过渡、变换、SVG 动画)，如果屏幕滚动任何量，该动画将卡住并在滚动完成时处于结束状态。特别是，我在垂直滚动页面上有一个元素(理想情况下)应该能够收缩和收缩以将其扩展为多个元素或返回到一个元素。

我很熟悉，作为一项优化，iOS 会在滚动期间卡住所有动画。然而，由于捏合和滑动手势都可以轻微滚动屏幕，这对用户体验来说非常糟糕，因为如果用户滑动(例如，稍微向上和向左滑动，而不是直接向左滑动)，精心制作的过渡可能会完全卡住。

我已经尝试了一些解决方案来在滚动期间启用渲染，例如 here ，但这些似乎不适用于现代版本的 iOS。我还尝试了 hammerJS e.preventDefault() 方法来卡住通过 Ember-gestures 扩展调用的手势期间的滚动，所以我的方法看起来像:

swipeLeft(e) {
    e.originalEvent.gesture.srcEvent.preventDefault()
    // Do stuff
},

...但这没有任何明显的效果。 (也许这里有问题？gesture 本身没有 preventDefault() 方法，ember-gestures 似乎试图抽象出其中的一些。

有什么方法可以在滚动期间保持动画呈现(这似乎不太可能)，或者在执行动画之前停止页面滚动(并防止在执行时滚动)？

或者，我可以通过任何方式对被解释为“捏合”或“滑动”手势的手势添加约束，从而排除那些也被解释为滚动手势的手势。

Answer 1

我的解决方案最终是添加事件处理程序，这样当用多个手指触摸屏幕时，主体被设置为固定位置，这样它在触摸期间不可滚动(当触摸被移除时固定位置被移除)结束)。我将处理程序添加到 pinchStart 和 pinchEnd 事件

我怀疑可能有更优雅的解决方案，但为了在捏合时禁用意外滚动以使 D3.js 动画不会中途卡住，这是一个快速有效的解决方案。