Comments (7)
Here is an updated sandbox without the browser scrolling, with just a minor css fix:
https://codesandbox.io/s/wwz6nxp8xw
from use-gesture.
@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
from use-gesture.
Sorry I thought your question was related to that specific example.
I think your question is two-folded:
- can we lock axis
- 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.
from use-gesture.
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.
from use-gesture.
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
from use-gesture.
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.
from use-gesture.
thanks for the explanation!
from use-gesture.
Related Issues (20)
- onDragStart direction is 0 instead of 1 or -1 HOT 11
- Not usable in NextJs Typescript after building HOT 4
- Seems to be an issue with nextjs build
- useGesture hook is not called once deployed on Vercel HOT 10
- Pinch bug: after opening/closing context menu, pinching gesture can be fired with 1 finger HOT 1
- Delegate drag to remaining finger after pinch or support multi-finger drag HOT 5
- Using modifierKey causes the mac pinch event to return HOT 2
- Using pointer.touch cannot be dragged under windows system HOT 6
- useDrag breaks onClick listener in React portal to shadow dom HOT 2
- using video element inside useDrag component doesn't allow the video to play/pause using single click over the video HOT 6
- DragBounds ignored when rerender target HOT 1
- dynamically updating useDrags axis option resets movement : [mx,my] HOT 2
- Using alt+left for navigation prevents all gestures on elements with axis: 'y'
- Drag gesture: Delay setting behavior does not adhere to documentation HOT 4
- Drag + Click + filtertaps option breaks onclick listener. Drag + Click + Treshold works. HOT 1
- touch-action: pan-y prevents L shaped gestures to scroll
- onPinch breaking on control + scroll HOT 5
- Where do I import a3f from? HOT 1
- Getting the error "a3f is not defined"
- Textarea doesn't work inside gesture container HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-gesture.