[Help]: Detecting scroll direction

[marraleks]

I just wonder if there is any method to detect scroll direction, we have a avatar/character that moves across the slides. So it would be nice to flip it so it moves with the slideshow?

[davidjerleke]

Hi @marraleks,

Do you want to detect scroll direction on each scroll event? Or just when a user clicks next and previous buttons?

Cheers,
David

[marraleks]

I think I would need to detect it on each scroll event, that way I can use with the keyboard navigation and draggable scroll.

[davidjerleke]

Hi again @marraleks,

Something along these lines should do the trick:

// -1 is forward because moving forward actually means translating the carousel with negative values
// If you want 1 to be forward, just multiply the sign like so: return Math.sign(diffToTarget) * -1
const directionMap = {
  "-1": "forward", 
  "1": "backward"
};

const readDirection = (embla) => {
  const { target, location } = embla.dangerouslyGetEngine();
  const diffToTarget = target.get() - location.get();
  return Math.sign(diffToTarget);
};

embla.on("scroll", () => {
  const direction = directionMap[readDirection(embla)];
  console.log(direction);
});

If you're using React you should refactor it a bit to do it the "React way". Also, note that you might need to polyfill Math.sign() depending on what browsers you need to support. Last but not least, don't forget to mark this answer as helpful if it helps you.

Cheers,
David

[marraleks]

That did the trick, thank you so much!