Fabric.js: Page Doesn't Scroll on Mobile

[TimHarker]

When you're on a mobile device and multi select is turned off on the canvas you can't drag on the canvas to scroll the page.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[kangax]

I think you can't drag on the canvas to scroll the page at all. We don't consider any of the canvas options.

[JRizzle88]

Correct, you cannot touch scroll on a canvas by default. However, I feel like there can be workarounds for this rather easily. Maybe an overlay with selection method disabled?

OR

Simply add a small scroll handle for the page on mobile so the user can use it if they get stuck over the canvas and can't scroll.

[masayoshiadachi]

How about enabling to scroll the page when multi touch is used?
Many iPad application uses multi touch to scroll and expand the page and single touch is used for selection and move as Fabric do.

[michalbe]

How about using fabric.Canvas#allowTouchScrolling (announced in 2013, documented here)? I met the same problem and found it the best solution. The issue was that after setting it to true the page was scrolled even when I wanted to modify an item (scale, rotate, move, etc). I fixed it with:

  var disableScroll = function(){
    canvas.allowTouchScrolling = false;
  };

  var enableScroll = function(){
    canvas.allowTouchScrolling = true;
  };

  canvas.on('object:moving', disableScroll);
  canvas.on('object:scaling', disableScroll);
  canvas.on('object:rotating', disableScroll);
  canvas.on('mouse:up', enableScroll);

It's not perfect but works way better than the default behavior - when the object is selected we disable touch scrolling and enable it on mouse:up event that fires also after touchend.

@michalbe

[TimHarker]

Your timing was uncanny. I mean, I'd just picked up the project again since having a manufacturing issue for the past 6 months. Literally just picked it up again, and thought to myself, where did I put this issue, where did I leave off, I remembered receiving some great suggestions but where was that forum again? And POW, @michalbe posts a real solution/possibility and I'm up and running... I'm sure I'll need to refine, but I'm up and running again... I truly believe that with enough creativity, anything is possible. Happy coding...

[michalbe]

@rekrah You're welcome :)

[DawnPaladin]

Great solution, @michalbe! Next person who finds this, be sure to put object:moving, not object: moving like I did. Doh!

[wolfgangdenthaner]

If you are using multi touch gestures add

canvas.on('mouse:down', disableScroll);

then scrolling is really disabled if you do something in your canvas

[fendorio]

@michalbe Great solution, I am however running into issues with the workaround on chrome mobile. Getting the following error:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Mobile chrome pauses javascript execution whilst the user is scrolling... Anyone else come up against this?

[Taral-Patoliya]

The scroll in mobile device does not work,even if i use allowTouchScrolling

[stikks]

I'm having this same problem right now and i've tried all the methods mentioned above to no avail

[raphaelbeckmann]

@idenlos

If you are using multi touch gestures add

canvas.on('mouse:down', disableScroll);

then scrolling is really disabled if you do something in your canvas

You are my hero! Thank you very, very much.
This prevents iOS Safari from the stupid overscroll while making a selection in the canvas.

[TiagoSilvaPereira]

Worked better for me (because when I start to drag out of selection, the selection is cleared and automatically the scroll is enabled):

this.canvas.on('selection:created', this.disableScroll);
this.canvas.on('selection:cleared', this.enableScroll);

[mh5]

I'm using a fabric.js 3.5.0 build with gestures support. To get the scrolling and the scaling (via the controls) work well together, I had first to manually incorporate the patch #5904 in my installation. After doing so, what seemed to be working fine for me was to set allowTouchScrolling to true when the canvas is instantiated and to call event.preventDefault() whenever an object:scaling is fired.

canvas.on('object:scaling', function() {
    event.preventDefault();
};

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.