Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Illegal invocation when targeting a container #60

Open
danDanV1 opened this issue Dec 16, 2018 · 2 comments
Open

Illegal invocation when targeting a container #60

danDanV1 opened this issue Dec 16, 2018 · 2 comments

Comments

@danDanV1
Copy link

I get the following error when trying to horizontally scroll a container:

vendor.js:80624 Uncaught TypeError: Illegal invocation
    at Class.<anonymous> (vendor.js:80624)

// scroll x axis
 scrollTo(eases[index] * targetX * dirX + offsetX, startY);

Logger immediately preceeding returns the following:
0 500 "tx:480, ty:NaN, ox:0, oy:undefined, x"

Invoked via (for debugging):

this.get("scroller").scrollTo(0, 500, {
    axis: "x",
    container: "scrollable-in-viewport",
    duration: 500
  });

On the following template:

  <div
    id="scrollable-in-viewport"
    style="overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height:100vh;"
  >
    ...many image components...
    <div
      class="bg-grey-darker"
      style="display:inline-block;height:100%;width:auto;overflow:hidden;"
    ></div>
    <div
      class="bg-grey-darker"
      style="display:inline-block;height:100%;width:auto;overflow:hidden;"
    ></div>
    <div
      class="bg-grey-darker"
      style="display:inline-block;height:100%;width:auto;overflow:hidden;"
    ></div>
</div>

Scroll method above, was for debugging the following implementation, which was throwing same illegal invocation error.

scroll: task(function*() {
    yield this.get("scroller").scrollToElementId(...arguments);
  }),
...
this.get("scroll").perform(component.element.id, {
        duration: 50,
        easeType: "linear",
        padding: {
          x: 50,
          y: 50
        },
        axis: "x",
        container: "scrollable-in-viewport"
      });

Logger for this scenario yields:
{y: 0, x: 0} {y: 0, x: 3937} "tx:3887, ty:-50, ox:0, oy:0, xy"

and Illegal invocation is for the following line:

// scroll x and y axis
scrollTo(eases[index] * targetX * dirX + offsetX, eases[index] * targetY * dirY + offsetY);

Am I missing something in the docs on how to implement?

@nickschot
Copy link

I'm seeing the same thing here, similar invocation.

@nickschot
Copy link

return (x, y) => {
container.scrollLeft = x;
container.scrollTop = y;
};

This is where it breaks. If you pass in the container as the third argument of that function instead of in the getScrollTo everything works properly.

zenzen-sol added a commit to zenzen-sol/ember-concurrency-scroll that referenced this issue Nov 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants