使用離子滾動移動並滾動畫布元素

Question

我在畫布元素上有一個大圖像，我希望使用離子滾動來拖動它。我實施了這個例子：

<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> 

...並且工作正常。現在，當我在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> 

畫布適當地顯示出來，它是由在500px的離子滾動元件如預期切斷，但因爲它與大的背景做了點擊+拖動功能不起作用。我可以用標準的鼠標滾輪或觸摸板滾動滾動。

我錯過了什麼？

Answer 1

我不確定它是否能正常工作，但試試這個。

<canvas id="canvas" style="width: 5000px; height: 5000px;"></canvas> 

離子滾動自動重構HTML像下面的圖像。

並創建另一個div標籤內不符合標準

Imgur

Answer 2

我因爲離子的最後一個版本（1.2）這個問題。

之前，我可以放大或縮小畫布內的滾動&，現在不再可能。

如果是緊急情況，請嘗試返回到以前的版本。

[編輯：]好吧，打開github上的問題後，只需在您的元素上使用overflow-scroll =「false」。

如這裏mentionned：

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

他們現在用滾動的方式本土。要回到Javascript方式，你必須使用overflow-scroll =「false」，現在它可以工作。

但它似乎是一個例外情況，因爲正如Ionic所說，溢出滾動=「假」是越野車。所以，作爲一個建議，只需要使用它，如果你需要畫布。