Scroll Progress (set)

👉 Feature Specification

// set scroll progress
// accepts a number from 0 - 1 representing % scrolled of scrollable distance
// scroll to target is smooth

embla.scrollToProgress(0.5)

As discussed in issue #21.

Special thanks

@xiel for this feature request.

[phmasek]

Perfect, thank you! I created a callback function based on your CodeSandbox that could easily be used for connecting scroll.

const scrollToProgress = React.useCallback(
  (progress: number) => {
    if (!embla) return;

    const { limit, target, scrollProgress, scrollBody, scrollTo } = embla.internalEngine();
    const currentProgress = scrollProgress.get(target.get());
    const allowedProgress = Math.min(Math.max(progress, 0), 1);
    const progressToTarget = allowedProgress - currentProgress;
    const distance = progressToTarget * limit.length * -1;

    scrollBody.useBaseMass().useBaseSpeed();
    scrollTo.distance(distance, false);
  },
  [embla]
);

I know it’s suboptimal considering that the library moved towards a plugins paradigm. Hopefully I’ll get the time to contribute with a plugin. But until then the callback might be useful for someone…

[davidjerleke]

@phmasek thanks.

The CodeSandbox in this comment might help you achieve what you want.

Yes, scrollToProgress() was removed in v3. Release details here.

Please note that you need to change all calls to embla.dangerouslyGetEngine() to embla.internalEngine() if you’re using v6 and up. Read more about all breaking changes in the release details.

Best David