[Help]: Limit drag/swipe to one direction

[rodrigovallades]

Summary

Hi,

I have a specific use case where I need the drag/swipe to be limited to just one direction.

I started to dig into the emblaApi.internalEngine() method and found out that I can use the scrollBody.direction(), which returns 1 or -1 depending on the direction.

emblaApi.on('scroll', (api) => {
  if (!api) return

  const engine = api.internalEngine()
  const { dragHandler, scrollBody } = engine

  // if user is dragging
  if (dragHandler.pointerDown()) {
    const direction = scrollBody.direction()
    console.log(direction)
  }
})

You can see it working here:
https://codesandbox.io/p/sandbox/embla-carousel-drag-direction-detection-47dj9n

Now, I need a way to disable drag/scroll completely in one specific direction (animation and everything else). Any thoughts on how can I accomplish this?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/embla-carousel-drag-direction-detection-47dj9n

[rodrigovallades]

Hi, I still haven't figured this one out. Any help is appreciated.

[davidjerleke]

@rodrigovallades thank you for your question.

This isn't possible with the current state of thee API. You can use the internalEngine() to create a hack that will work, but that's not optimal. I have these two options on my roadmap: pointerDown, pointerMove which will enable you to pass your own callback but these features are not finished yet.

Best,
David

[davidjerleke]

@rodrigovallades what you want to do isn't possible at the time of writing. However, there's an upcoming feature called event interceptors that will solve this in the future. Interceptors will be available for the pointerMove event. It's mentioned here:

• [Feat]: ⭐ Roadmap #841