make plugin use in browser, instead of typescript?

[boroco]

Hi Team,
#198
#408
I need smooth and slow scrolling to the top or bottom of the page.

i need an effect like this issue, but i can't write them in javascript browser. It always says " Cannot read properties of undefined (reading 'pluginName')". Can you help me with the code using javascript?, instead of typescript. I think a lot of people need this.

Thank you author.

[idiotWu]

You can check #104 (comment) to see how to write a plugin in es5 syntax.

P.S. are you the one who sent me the email about the same question?

[boroco]

@idiotWu
That's also the question my friend asked in the email, we all have the same question.

[idiotWu]

To be more specific:

var Scrollbar = window.Scrollbar;

// see also: https://github.com/idiotWu/smooth-scrollbar/issues/198#issuecomment-496264237
function EdgeEasingPlugin() {
  Scrollbar.ScrollbarPlugin.apply(this, arguments);

  this._remainMomentum = {
    x: 0,
    y: 0,
  };
}

EdgeEasingPlugin.prototype = Object.create(Scrollbar.ScrollbarPlugin.prototype);

EdgeEasingPlugin.prototype.transformDelta = function(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 };
}

EdgeEasingPlugin.prototype.onRender = function onRender(remainMomentum) {
  Object.assign(this._remainMomentum, remainMomentum);
}

EdgeEasingPlugin.pluginName = 'edgeEasing';

[boroco]

@idiotWu
I copy your code, then call Scrollbar.use(EdgeEasingPlugin); doesn't seem to work, it shows error "Uncaught ReferenceError: EdgeEasingPlugin is not defined".
Can you send me a little more detail?

[boroco]

and Uncaught ReferenceError: EdgeEasingPlugin is not defined

[idiotWu]

So your build system does not support the trailing commas. Remove the last comma at line 785 should make it work.

[boroco]

Uncaught TypeError: Cannot read properties of undefined (reading 'ScrollbarPlugin')

@idiotWu

[idiotWu]

What's the name of your Scrollbar class?

[boroco]

Thanks @idiotWu
i changed
var Scrollbar = window.Scrollbar; to import Scrollbar from 'smooth-scrollbar';
it's working now.

[boroco]

Oh, Perfect.
Source code i use:

import Scrollbar from 'smooth-scrollbar';
/* or var Scrollbar = window.Scrollbar; */

`/ see also: https://github.com/idiotWu/smooth-scrollbar/issues/198#issuecomment-496264237
  function EdgeEasingPlugin() {
    Scrollbar.ScrollbarPlugin.apply(this, arguments);

    this._remainMomentum = {
      x: 0,
      y: 0,
    };
  }

  EdgeEasingPlugin.prototype = Object.create(Scrollbar.ScrollbarPlugin.prototype);

  EdgeEasingPlugin.prototype.transformDelta = function(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 };
  }

  EdgeEasingPlugin.prototype.onRender = function onRender(remainMomentum) {
    Object.assign(this._remainMomentum, remainMomentum);
  }

  EdgeEasingPlugin.pluginName = 'edgeEasing';
Scrollbar.use(EdgeEasingPlugin);`

[boroco]

@idiotWu
I see a lot of people need scroll animation like this, if it is added in v9 that would be great. the user will have a lot of options when scrolling.
Thanks the author.