Embla-carousel: Create an option to block excessive scrolling

[LaksCastro]

Hi @davidcetinkaya !

Embla currently has ways to remove the leading and trailing blanks from the Slider (containsScroll: true), but still allow for excessive scrolling. It would be interesting to add an option to block this scroll and stop it when it reaches the end or beginning of the Slider. I would like to know what you think of this idea

Below is the example of the "excessive scroll" I am referring to

[davidcetinkaya]

Hello Laks (@LaksCastro),
Thank you for this issue and I appreciate the screenshot 👍.

When mentioning excessive scrolling, are you referring to this rubber band effect when the loop option is false and the carousel is dragged towards its edges?

Best,
David

[LaksCastro]

Yes, that's right. I would like to know what you think of including an option to block this rubber band effect. On many web sites, this effect is blocked. And particularly, within the UI I'm building, it would be great to have this option available.

Thank you so much for reading the recommendation.
I look forward to your reply :)

[davidcetinkaya]

Hello again Laks (@LaksCastro),

Thank you for clarifying! One more question: Do you want to block the excessive scrolling only when the user has finished dragging or entirely (even when pointer is down and dragging)?

Kindly,
David

[LaksCastro]

Exactly, totally block, as shown in this short video I recorded from a Slider mobile

Thank you,
@davidcetinkaya

[davidcetinkaya]

Hello @LaksCastro!

I hope you’re all well 👍🏻. Sorry for the slow response here. So an update on this issue:

I’ve tested to achieve what you want locally but it kind of goes against Embla’s vision because Embla measures how rigorously a user drags the carousel in contrast to most other carousel libs. Most other libs only measure the drag direction and just assume the carousel should scroll one slide forward/backward. This is why they feel unnatural and very stiff. Overriding the drag force and blocking leading and trailing excessive scrolling would make the carousel feel unnatural.

However, Embla version 3 will soon be released where you can access the actual engine through the API. This will enable you to achieve what you want. As soon as I’ve released version 3 I will put together a CodeSandbox for you in order to demonstrate how to achieve what you want with just a few lines of code.

I hope this makes sense.

Best,
David

[LaksCastro]

Hi @davidcetinkaya!

Thank very much,
Dont problem, feature request are hard to search and to integrate with the current features.

I understood what you meant by "unnatural and very stiff", and really, what makes me use Embla is its fluidity compared to other libraries. And I wait for the code in the CodeSandBox :)

I will close this Issue, but feel free to add the code of CodeSandBox on documentation, in README.md, why do I know people who would also like to have access to the snippet to be able to block the scroll.

Again, thank you, @davidcetinkaya

[joeyvanlierop]

Was an example ever added? I am unable to find anything on the examples page, and this feature would be quite useful to me 😁

[davidcetinkaya]

Hello Laks (@LaksCastro) and Joey (@joeyvanlierop)!

Thank you for your question Joey. The answer to your question is no, not yet. But I've quite recently added this to my list of things to investigate, together with issue #38, because it seems like these issues are getting a bit of traction. Please note that I can't promise any outcome but I will at least look into it further.

I can't give an ETA for this though. Public feature requests are progressing quite slow right now due to lack of time.

I hope you understand.

Best,
David

[davidcetinkaya]

@jeiea, I've spent about 6 hours looking into this and I remember that I wasn't able to come up with a solution that I was satisfied with back then. As I mentioned in one of my earlier comments:

I’ve tested to achieve what you want locally but it kind of goes against Embla’s vision because Embla measures how rigorously a user drags the carousel in contrast to most other carousel libs. Most other libs only measure the drag direction and just assume the carousel should scroll one slide forward/backward. This is why they feel unnatural and very stiff. Overriding the drag force and blocking leading and trailing excessive scrolling would make the carousel feel unnatural.

I wouldn't want to implement something that results in a very stiff feeling when dragging. Do you have any examples out there that solves this nicely without completely killing the fluid feel? That could help me try new approaches.
Best,
David

[jeiea]

What I saw is overscroll indicator, but I'm afraid that it may not be what exactly you want. It can give a feedback of overscroll but not limited to fluid feel.

I don't know the reason why you stick to fluid feeling, it's just a idea what I see. I guess that android apps maybe use glowing
effect more or less and iOS apps use bouncing overscroll.

[davidcetinkaya]

@jeiea I couldn't understand what the overscroll indicator is doing? It's just a yellow area in the example?

I don't know the reason why you stick to fluid feeling, it's just a idea what I see.

I'm not quite sure what you mean by this. You don't think a fluid feeling is important? Or do you mean something else?

[jeiea]

My link wasn't accurate. What I imagined is similar to the following.

I think fluid feeling is for indication of scroll end. If there's no fluid physics or glow indicator, users may not be able to notice whether the app stops responding or scroll is finished in a short time. So I think both of them have same purpose and can be exchanged.

So I'm curious why you prefer one over the other. I read above comments again and got the keyword stiff feeling. Of course if user's drag is ignored completely at the scroll end it can give stiff feeling. But I don't think it is a problem and maybe android users familiar to that. And even I wanted this clamping physics behavior without glowing effect. I can't sure this is right in the respect of UX but it is exactly what I want.

[jeiea]

You requested a new approach which preserve fluidity's advantage, but I don't think we should change the default behavior and the issue title also includes 'option'.

[davidcetinkaya]

Thank you for the GIF @jeiea. It makes much more sense what you mean now.

So I'm curious why you prefer one over the other. I read above comments again and got the keyword stiff feeling. Of course if user's drag is ignored completely at the scroll end it can give stiff feeling. But I don't think it is a problem and maybe android users familiar to that.

One of the main reasons for building this library is because I wasn't satisfied with how other libraries handle drag events. They're in my opinion very stiff and only measure drag direction, and not force. It almost feels like you're trying to move a refrigerator when dragging them. This is in my opinion bad UX and that's why I prefer a fluid carousel. The speed and duration of the scrolling should be proportional to how vigorous the drag gesture is.

I haven't considered the overscroll indicator up until now and I'm willing to try it out. Can't promise anything and give an ETA though. But I will spend some time to see what I can come up with and if it fits the Embla vision.

Best,
David