react-reorder icon indicating copy to clipboard operation
react-reorder copied to clipboard

Freezes window scroll on touch

Open adsteel opened this issue 10 years ago • 7 comments

I am unable to window scroll when dragging on the list on a touch screen. The window scroll event is swallowed and all I can do is reorder. If I move the list to a div that scrolls, it works fine.

adsteel avatar Nov 17 '15 20:11 adsteel

You shouldn't be able to scroll while dragging an item. Scrolling is implemented so that when you drag an item near the bottom / top of the list it'll scroll automatically.

Imagine you're trying to drag an item from the center of the list to the top. If scrolling was also allowed then you would end up scrolling down the page, and you'd never be able to place the item at the top.

Make sure the list container is scrollable & it should work fine. :)

JakeSidSmith avatar Nov 17 '15 20:11 JakeSidSmith

@JakeSidSmith Thanks for the quick response! It does work fine in a list container. But I don't want to constrain it to a list container. I want to have a normal window, with a list that disappears off the page. I want to both be able to scroll the page to see the rest of this list (by touch/dragging the list), and to reorder the items. Does that make sense?

adsteel avatar Nov 17 '15 20:11 adsteel

Ahh, I think I see what you mean. Even while not dragging an item you cannot scroll past the reorderable list?

JakeSidSmith avatar Nov 17 '15 20:11 JakeSidSmith

On a touch screen, I cannot scroll the page when I touch-drag on the list. The page scroll event seems to be swallowed. I can still scroll the page when I touch-drag elements outside of the list, and I can reorder the items I can see in the list.

adsteel avatar Nov 17 '15 20:11 adsteel

Kk. Well, this'll definitely need a fair bit of work. This component was designed to work like a native Android / iOS listview, and they don't tend to have other scrollable content around them.

I'll have a quick look now. :)

JakeSidSmith avatar Nov 17 '15 20:11 JakeSidSmith

Thanks!

You can see this in your demo if you:

  1. disable the overflow:auto on the container div (or remove the list from any otherwise constrained container div)
  2. create enough list items that they disappear off the end of the page
  3. use the chrome iPad emulator to try to scroll.

adsteel avatar Nov 17 '15 20:11 adsteel

I've stayed up way too late working on this, but I'm very close to a breakthrough. Will hopefully have the solution tomorrow. Gonna sleep on it. :)

JakeSidSmith avatar Nov 18 '15 01:11 JakeSidSmith