search

kutlugsahin / react-smooth-dnd

react wrapper components for smooth-dnd
MIT License
1.71k stars 142 forks source link

in mobile when dragging, elements jitter and screen scrolls #27

Open brietsparks opened 6 years ago

brietsparks commented 6 years ago

In mobile, when dragging an item, the window scrolls before the item reaches the edge of the screen, and the elements jitter.

Example: https://github.com/brietsparks/rsd

This happens when using the library, but not in the demo app.

myleftshoe commented 5 years ago

Have this problem on Edge browser on windows mobile (but not on chrome dev tools emulator). Unfortunately this is the only physical device I have at the moment so haven't tested on android or iOS.

  1. The container scrolls when dragging but stops when entering the top or bottom autoscroll regions, or if the drag is paused, ie. stop moving finger while maintaining touch, then move again

  2. Jitter - when the drag is started in the auto-scroll regions the dragged element animation lags causing it to jump. Smooth when started outside the auto-scroll regions, i.e. the middle part of the screen.

brietsparks: This hack stops the unwanted scrolling but doesn't fix jitter - put it in onDragStart function

      this.containerRef.scrollTop = this.containerRef.scrollTop - 1; 
      // will not scroll up 1px if scrollTop is zero =>
      // do not scroll it down to avoid page moving 
      if (this.containerRef.scrollTop > 0) 
        this.containerRef.scrollTop = this.containerRef.scrollTop + 1;

kutlugsahin: fyi had same problem with react-beautiful-dnd too!