javascript - 使用 ionic-scroll 移动和滚动 Canvas 元素

Question

我在 Canvas 元素上有一个大图像，我希望使用 ionic-scroll 来拖动它。我实现了这个例子:

  <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat">
    </div>
  </ion-scroll>

... 这很好用。现在，当我将 Canvas 元素添加到 div 内部时，滚动停止工作。

  <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px;">
      <canvas id="canvas"></canvas>
    </div>
  </ion-scroll>

Canvas 正确显示，并按预期在 500 像素处被 ion-scroll 元素 chop ，但点击 + 拖动功能无法像在大背景下那样工作。我可以使用标准的鼠标滚轮或触摸板滚动来滚动。

我错过了什么？

Answer 1

自上一版 Ionic (1.2) 以来我就遇到了这个问题。

以前，我可以通过在 Canvas 内捏合和滚动来放大/缩小，现在不可能了。

如果情况紧急，请尝试返回到以前的版本。

[编辑:] 好的，在 github 上打开一个问题后，只需在您的元素上使用 overflow-scroll="false"。

正如这里提到的:

http://blog.ionic.io/announcing-ionic-1-2/

他们现在使用本地滚动方式。要回到 Javascript 方式，您必须使用 overflow-scroll="false"，现在它可以工作了。

但这似乎是一个异常(exception)情况，因为正如 Ionic 所说， overflow-scroll="false"是有问题的。因此，作为一个建议，如果您需要 Canvas ，请使用它。