Ease when reach to the edges

[Drafteed]

Hello! Much thanks for a nice plugin.

How to slow down and block scrolling with ease when reach to the edge of start and end document.

e.g: https://muraflex.com/en (seems to uses your lib) https://www.thehookgroup.co.uk/ https://www.ouiwill.com/ https://tiltstory.com/ (seems to uses your lib)

I founded simular issue: #98 but it seems to use previous version.

[idiotWu]

You can define a plugin to do this:

import { ScrollbarPlugin } from 'smooth-scrollbar';

class EdgeEasingPlugin extends ScrollbarPlugin {
  static pluginName = 'edgeEasing';

  private _remainMomentum = {
    x: 0,
    y: 0,
  };

  transformDelta(delta) {
    const {
      limit,
      offset,
    } = this.scrollbar;

    const x = this._remainMomentum.x + delta.x;
    const y = this._remainMomentum.y + delta.y;

    // clamps momentum within [-offset, limit - offset]
    this.scrollbar.setMomentum(
      Math.max(-offset.x, Math.min(x, limit.x - offset.x)),
      Math.max(-offset.y, Math.min(y, limit.y - offset.y)),
    );

    return { x: 0, y: 0 };
  }

  onRender(remainMomentum) {
    Object.assign(this._remainMomentum, remainMomentum);
  }
}

// use it!
Scrollbar.use(EdgeEasingPlugin);

[idiotWu]

Demo: https://codepen.io/idiotWu/pen/yWERpw

[Drafteed]

@idiotWu Thx, but i solved like this: https://gist.github.com/Drafteed/595a337a87627123bd9e01691d86840b My solution does not affect base speed.

[cristianalonso]

Hello, the plugin is great, thank you very much. Everything working perfectly. I just need to implement this code and I can not do it, any idea how to implement this code in Jquery?

My configuration: Barba js Jquery Gulp

var elem = document.querySelector (". main"); var scrollbar = Scrollbar.init (elem, { speed: 0.1 damping: 0.2 });