[Feat]: Configurable threshold for settled

[richsoni-spotify]

Which variants of Embla Carousel are relevant to this feature request?

• 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)

Feature description

Thanks for all the hard work. This library has been a pleasure to integrate into our ecosystem. The only snag we have hit is related to the delay in the settled state.

Attached is a screenshot of our carousel with a duration of 20. As you can see, the time it takes for our disabled state to fade back in is jarring. Despite the micromovements the DOM might be still making, it would help us if we could adjust the threshold at which everything is considered "settled" so we can reenable our slides.

Kapture.2024-02-06.at.17.37.09.mp4

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[sarussss]

Hi @richsoni-spotify
I think you can try event select

[davidjerleke]

@richsoni-spotify why not as @sarussss mentioned use the select event instead? This will fire as soon as the selected scroll snap changes:

emblaApi.on('select', () => { /* Do your thing... */ })

[richsoni-spotify]

Hey @davidjerleke, thanks for sharing this. I tried to use the select handler as suggested, with our setup this seems to emit very shortly after the scroll event starts. We are trying to have the slide remain in its disabled state while it goes beneath the mouse. Since the slide has a video that plays when hover is active.

Here is the benchmarking I did:

Cycle | onClick to select (ms) | select to settle (ms)
------------------------------------------------------
1     | 14                     | 793
2     | 14                     | 112
3     | 15                     | 1188
4     | 14                     | 1193
5     | 15                     | 1188
6     | 16                     | 1188
7     | 17                     | 188
8     | 16                     | 759
9     | 18                     | 762

[richsoni-spotify]

Use case is the same as #739

Since we need to disable the slides during scrolling, but the settled method is waiting to long to reenable. It would also be possible to do this ourselves with the onScroll method if we knew how far it was from settling. Like if we didn't control the threshold of the 'settled' event, but knew how far off we were, so we could manipulate some state in our component.

Does that make sense?

[davidjerleke]

@richsoni-spotify I see. You should be able to do something along these lines:

const settlePixelThreshold = 10

function fireCustomSettle(emblaApi) {
  const { dragHandler, location, target } = emblaApi.internalEngine()
  if (dragHandler.pointerDown()) return // Bail if user is dragging

  const diffToTarget = target.get() - location.get()
  if (Math.abs(diffToTarget) < settlePixelThreshold) {
    // do your thing here
  }
}

emblaApi.on('scroll', fireCustomSettle)

However, please note that this will fire multiple times as long as diffToTarget is less than settlePixelThreshold. You might want to add some sort of check to prevent that.

Best,
David

[richsoni-spotify]

This worked perfectly! Thank you!!!

[richsoni-spotify]

This id