如何在 iOS 上使用 HammerJS 捏合手势而不滚动页面？答案

【问题标题】：How can I use a HammerJS pinch gesture on iOS without scrolling a page?如何在 iOS 上使用 HammerJS 捏合手势而不滚动页面？
【发布时间】：2017-01-19 06:47:05
【问题描述】：

我正在使用 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 似乎试图将其中的一些抽象掉。

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

或者，我有什么方法可以为被解释为“捏”或“滑动”手势的手势添加约束，以便排除那些也被解释为滚动手势的手势。

【问题讨论】：

标签： ios cordova ember.js gesture hammer.js

【解决方案1】：

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

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

【讨论】：