Scrolling with the trackpad is super smooth, scrolling with the mouse not so much.

[Ocupe]

Dear @xiel, thank you for this very nice extension of embla-carousel! I have the following setup: Vertical embla-carousel with the following options:

const options: Partial<OptionsType> = {
      loop: true,
      axis: "y",
      skipSnaps: true,
      align: "start",
      draggable: true,
    };

Scrolling with the trackpad and dragging is super smooth and responsive. But when using the scroll wheel on the mouse the slider makes the following:

1. carousel scrolls a tiny bit
2. carousel stops for a short time
3. carousel scrolls really fast in an unpredictable way

Is this something you are aware of or am I doing something wrong? Your input on the topic is greatly appreciated. :)

[xiel]

Hi @Ocupe

what (kind of) mouse are you using? Does it support pixel precision scrolling or does it scroll in lines?

Cheers Felix

[Ocupe]

thank you @xiel for your reply. I'm not sure what kind of precision my mouse supports. But after your commend I checked with 5 fairly new and different mice, and had the same problem. Because I can't control what mice possible users have I would like a solution that works for all mice.

this is my code, maybe I made some stupid mistake? (it is using Svelte but looks like normal JS)

<script>
  import EmblaCarousel from "embla-carousel";
  import { setupWheelGestures } from "embla-carousel-wheel-gestures";
  import { onMount } from "svelte";

  let emblaNode;
  let embla;

  onMount(() => {
    const options = {
      loop: true,
      axis: "y",
      skipSnaps: true,
      align: "start",
      draggable: true
    };
    embla = EmblaCarousel(emblaNode, options);
    setupWheelGestures(embla);
    return () => {
      if (embla) embla.destroy();
    };
  });
</script>

<div class="embla">
  <div class="embla__viewport" bind:this={emblaNode}>
    <div class="embla__container">
      {#each new Array(26) as x, index}
        <button class="embla__slide">{index}</button>
      {/each}
    </div>
  </div>

</div>

<style>
  .embla {
    top: 0px;
    right: 0px;
    width: 150px;
  }
  .embla__viewport {
    overflow: hidden;
  }
  .embla__container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 5vh);
    will-change: transform;
  }
  .embla__slide {
    position: relative;
    flex: 0 0 5vh;
    background: lightsalmon;
    overflow: hidden;
  }
</style>

Let me know if I can provide further content to help!

[xiel]

Thanks for the example, I don't think there is a mistake on your side.

Hope I can provide an improvement soon.

[xiel]

Hi @Ocupe

can you please check, if this demo is a improvement with your mouse?

https://37f5w.csb.app https://codesandbox.io/s/little-cherry-37f5w?from-embed=&file=/App.svelte

I was able to reproduce a similar effect as you described for a older mouse I found, and it is much better like this for me.

I gotta say tho, that a mouse that only emits line-precision (instead of pixel-precision) will never feel as good as a pixel-precision mouse or trackpad (eg. Magic Mouse or Microsoft Surface Trackpad).

Can you provide me with the operating system you test with? And browser?

Cheers

[Ocupe]

@xiel I tested your app (https://37f5w.csb.app/) with Safari, Firefox and Chromium on MacOS Catalina (10.15.7) and it works much better now! Faster scrolling movements are still a bit unexpectedly fast but still much better.

Intentionally or not, your new version also fixed a second bug for me. When I changed the scroll direction with the track pad (without releasing it), the carousel no longer scrolled. Only after I "restarted" the scroll, it worked again. This is now also gone 🎉

Overall I'm super happy with the result and your fast fix! Thank you and vielen Dank 👍

[xiel]

@Ocupe Thanks for checking! I'm glad that it helped 🥳

Yes, I also noticed the behaviour improved in other situations as well, so I'm very happy with this update.

I will do a bit more testing and will hopefully able to release this on the stable channel tomorrow. Currently it is released on the beta channel as 1.1.1-beta.0

[xiel]

This was fixed in release v1.1.1 📦

@Ocupe Thanks for opening this ticket and validating the fix!