lock axis with gesture in the examples?

[kossel]

If you go to the "Draggable List" example in mobile view, dragging items vertically causes the browser to scroll, is there a way to prevent that like preventDefault? I think would be nice to show in the example

https://www.react-spring.io/docs/hooks/examples

[dbismut]

Here is an updated sandbox without the browser scrolling, with just a minor css fix:
https://codesandbox.io/s/wwz6nxp8xw

[kossel]

@dbismut I think you missunderstood my point. we can not always just lock the body with overflow: hidden, would be nice if there a way to lock axis like React pose from popmotion (https://popmotion.io/pose/) see interactivity example.

you can also see this example, when you scroll horizontal the browser vertical scroll is ignored
https://codepen.io/kossel-the-styleful/pen/EMERBe

[dbismut]

Sorry I thought your question was related to that specific example.
I think your question is two-folded:

1. can we lock axis
2. is there a way to preventDefault

Question 1

Contrary to pose or react-pose, react-with-gesture needs you to be more explicit with your code. So if you only want an element to react to horizontal gestures you could have:

const [{ x }, set] = useSpring(() => ({ x: 0 }));
const bind = useGesture(({ delta, down }) =>
  set({ x: down ? delta[0] : 0, immediate: down })
); // delta[0] contains the x displacement
return (
    <animated.div
      {...bind()}
      style={{ transform: x.interpolate(v => `translateX(${v}px)`) }}
      className="square"
    />
);

See codesandbox here: https://codesandbox.io/s/6xvp63k19r (note that it doesn't fix the body scroll on mobile)

Question 2

Did you have a look at #1? You should be able to access the event element.

[drcmda]

The event is passed through, it's part of the event data. but if you're in passive mode you can't call preventDefault, it's forbidden by the browser. You're free to switch passive events off of course. Another possibility would be to simply set the overscroll container to overflow: hidden. that's what i would probably go for.

[kossel]

Ok, I made it work https://codesandbox.io/embed/y28q726919?codemirror=1 for the scroll

but I still think would be good to include the event.preventDefault() into the examples so when user actually testing/playing it with phone, they don't see the page scrolls

[drcmda]

The event is listed on the front-page, look where it says "Event data", that's the generic browser event with all the methods you can call on it. The passive handler stuff is mentioned under config. Passive events are faster and don't cause lag, but it doesn't allow you to stop propagation or prevent defaults.

[kossel]

thanks for the explanation!