ScrollSmoother and Angular

[Masha555]

Hello, please tell me what I need to fix in my code to make ScrollSmoother work in my Angular project. What am I doing wrong? I have created a small demonstration of my project.  a demo of my project

[GreenSock]

I'm not at all familiar with Angular, but it looks to me like a CSS issue on your end where you set the height of the content to be 100%, thus there's no scrolling possible: 

https://stackblitz.com/edit/stackblitz-starters-ck4w7t?file=src%2Fapp%2Fapp.component.ts,src%2Fglobal_styles.css

 

Does that help?

[Masha555]

Thanks, this helps, but when I want to add additional functionality in the form of a to top button, my button does not get the correct coordinates, demo of my project

[Masha555]

On 8/13/2023 at 12:04 AM, GreenSock said:

I'm not at all familiar with Angular, but it looks to me like a CSS issue on your end where you set the height of the content to be 100%, thus there's no scrolling possible: 

https://stackblitz.com/edit/stackblitz-starters-ck4w7t?file=src%2Fapp%2Fapp.component.ts,src%2Fglobal_styles.css

 

Does that help?

Please look at my code again, maybe you will be able to understand what causes this behavior of the "Top" button.

[GreenSock]

Yes, that's because you're trying to use a native scrollIntoView() method that isn't SmoothScroller-aware. 

 

Just use the appropriate ScrollSmoother method: 

// OLD
this.wrapperEl.nativeElement.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
});

// NEW
this.smoother.scrollTo(this.wrapperEl.nativeElement, true);

https://stackblitz.com/edit/stackblitz-starters-unyihj?file=src%2Fapp%2Fapp.component.ts

[Masha555]

3 hours ago, GreenSock said:

Yes, that's because you're trying to use a native scrollIntoView() method that isn't SmoothScroller-aware.

 

Just use the appropriate ScrollSmoother method:

// OLD
this.wrapperEl.nativeElement.scrollIntoView({
 behavior: 'smooth',
 block: 'start',
});

// NEW
this.smoother .scrollTo(this.wrapperEl.nativeElement,true);

https://stackblitz.com/edit/stackblitz-starters-unyihj?file=src%2Fapp%2Fapp.component.ts

It really works! Thank you for helping me, it's very inspiring to learn more.

 

Could you please tell me one more thing, if I have a child element in which I also want to use scroll button to a given element. I create a new ScrollSmoother in the class method, it does its function, but it scrolls down too fast and not smooth ...  If you don't mind, you can see it in my demo project in the CONTACTS section. my Demo Project

[GreenSock]

Sorry, I don't see the problem. If you need help, please be VERY specific about exactly how to reproduce the problem and make sure the demo is as isolated as possible.

[Masha555]

8 hours ago, GreenSock said:

Sorry, I don't see the problem. If you need help, please be VERY specific about exactly how to reproduce the problem and make sure the demo is as isolated as possible.

Hello. Indeed I have in the course of experiments managed to solve the problem with scrolling. I forgot to warn you about it.  Thank you very much for your help.