Enable touch-scroll on canvas out of both image and cropbox, for smartphone.

[dxth3iRi]

Phenomenon.

On canvas area, outside of neither the uploaded image nor generated cropboxes, which is displayed like gray-meshed,
the event "touch-move" is interpreted as "crop-move".

Problem.

Under smartphone screen on its narrow width, it is apt to zoom the image by mistake,
whereas actually the user wants to scroll upwards or downwards.

This seems resolved on the predecessor library "cropper":
fengyuanchen/cropper#727

Solution ideas.

Here shows two alternatives, the one is conservative, the other brings rather destructive change:

Idea1. (conservative)

Introduce a new dragMode, in addition to CROP, MOVE and NONE,
or, Create a new independent mode "touch-scroll":

• a mode just for scroll screen vertically.
• disable CSS options of "movable", "zoomable", "scalable" (,"rotatable") simultaneously.
• for cropper.css, change CSS settings as follows:
  .cropper-container { ... -ms-touch-action: auto; touch-action: auto; }
  and
  .cropper-face, .cropper-line, .cropper-point { ... -ms-touch-action: none; touch-action: none; }

Idea2. (destructive)

Attach the configuration of Idea1 to DRAG_MODE_NONE as default.

You can test is as follows:

1. Extend button sequence of dragMode on Demo site, to add new button to set dragMode as DRAG_MODE_NONE.
2. Add the following button to index.html:
   <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="none" title="None"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.setDragMode(&quot;none&quot;)"> <span class="fa fa-scroll"></span> </span> </button>

And at the same time, toggle ALL CSS settings described in Idea1.
A sample design looks like

[dxth3iRi]

similar issue, concerning similarly the out-of-canvas area:
#880

[fengyuanchen]

As the canvas area is fully controlled, I suggest you use Cropper.js on an independent page or a dialog for a better user experience.

[dxth3iRi]

Thank you for consideration.
As mentioned, I did it done by wrap on independent page.