[Bug]: canScrollNext inconsistent behavior

[tarikmehinagic]

Which variants of Embla Carousel are you using?

• 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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Steps to reproduce

1. Scroll to the end
2. Click append button and canScrollNext should result in false even though there is one new slide.

In case you are unable to reproduce it, please repeat the process few times, it is very inconsistent.

Expected Behavior

canScrollNext should result in true in case it's scrollable.

Additional Context

I've tried to implement infinite scroll using one of your predefined examples. This effect might be caused by reloadEmbla ( reIniting engine, copying modules and translating to old distance ). One can find it under watchSlides option, in predefined examples which I linked above.

What browsers are you seeing the problem on?

Firefox, Chrome

Version

v8.2.1

CodeSandbox

https://codesandbox.io/p/devbox/polished-sky-qmkyfj

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 bug reports

[davidjerleke]

Hi @tarikmehinagic,

Thanks for your question. The React example is working just fine and the problem in your sandbox is most likely that you're doing stuff in the wrong order. There is no official Vue sandbox in the docs for the infinite scroll example simply because my lack of time. Until the example is created, you can try creating a new discussion and see if someone in the community can help you out.

Feel free to copy paste the content in your bug report to the discussion and this bug report will be deleted once that's done.

Thanks for understanding
/ David

[tarikmehinagic]

Hi @tarikmehinagic,

Thanks for your question. The React example is working just fine and the problem in your sandbox is most likely that you're doing stuff in the wrong order. There is no official Vue sandbox in the docs for the infinite scroll example simply because my lack of time. Until the example is created, you can try creating a new discussion and see if someone in the community can help you out.

Feel free to copy paste the content in your bug report to the discussion and this bug report will be deleted once that's done.

Thanks for understanding / David

hi @davidjerleke thanks for the update, my example is not really "infinite scroll", it's just basic example where I scroll to the end, append more slides and call canScrollNext, I will try to reproduce the same using React or pure JS/TS

[davidjerleke]

@tarikmehinagic thanks for clarifying what you want to achieve. In that case, get rid of the watchSlides option because Embla watches for slide element changes automatically by default. Try this instead:

• Sandbox

The reason why you think it's unpredictable is because you set slidesToScroll: 3. Embla will then group slides together and make every group act as a single slide. You can read more about how it works here:

• #938 (comment)

However, if you want methods that if the carousel has scrolled to any end or not, meaning fully to the left or right end, you can make use of these two custom methods:

const canScrollBackward = (emblaApi) => {
  const { target, limit } = emblaApi.internalEngine()
  const targetRounded = parseFloat(target.get().toFixed(2))
  return targetRounded < limit.max
}

const canScrollForward = (emblaApi) => {
  const { target, limit } = emblaApi.internalEngine()
  const targetRounded = parseFloat(target.get().toFixed(2))
  return targetRounded > limit.min
}

This is in other words not a bug but rather expected behavior.

[tarikmehinagic]

@davidjerleke thanks for clarification