[Help]: AutoScroll with <a> tags stuttering after drag

[mtm9ewy]

Summary

Hello @davidjerleke

First, thank you for creating such an amazing library. It's been so easy to use and so flexible!

I have an issue right now where I am wrapping my slides in <a> tags, with dragFree and AutoScroll, and the behavior is a bit buggy (video attached). Essentially after I drag a first time, I'm not able to drag again unless my mouse leaves and re-enters the carousel. After I try to drag the second time, the carousel resumes auto-scrolling, even though my mouse is still there.

I will create a CodeSandbox when I have a chance, but if you have any initial thoughts/ideas, it would be very appreciated. Thank you so much!

Screen.Recording.2025-11-20.194439.mp4

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

Additional information

Embla config:

  // Initialize Embla with base options and the Autoscroll plugin
  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      loop: true,
      dragFree: true,
      axis: isMobile ? "y" : "x",
    },
    [
      Autoscroll({
        speed: 1,
        startDelay: 0,
        stopOnInteraction: false, // Scroll never stops
        stopOnMouseEnter: true,
      }),
    ]
  );

Carousel HTML:

<div className={styles.embla}>
      <div ref={emblaRef}>
        <div className={styles.embla__container}>
          {PROJECTS.map((project, index) => (
            <div className={styles.embla__slide} key={index}>
              <a href={project.url}>
                <div className={styles["top-box"]}>
                  <h2>{project.title}</h2>
                  {project.format && (
                    <p className={styles.ttu}>{project.format}</p>
                  )}
                </div>
                <div
                  className={`${styles["aspect-ratio"]} ${styles["aspect-ratio--1x1"]} ${styles.mv3}`}
                >
                  <div
                    className={`${styles.blend} ${styles["aspect-ratio--object"]} ${styles.cover}`}
                    style={{
                      backgroundImage: `url(${project.image})`,
                      backgroundPosition: "center",
                    }}
                  ></div>
                </div>
                <div className={styles["project-content"]}>
                  <small>
                    <p>{project.description}</p>
                  </small>
                </div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </div>

### CodeSandbox example

https://codesandbox.io/p/sandbox/embla-carousel-auto-scroll-react-forked-xxx396

[mtm9ewy]

Created this bug now that I have a codesandbox created: #1263