FAQ

No animation is started

• Make sure that there's no javascript error on the developer console (Press F12 key to open it) which might help tracing down an error in the application or library. Reload your application with the developer tools open to catch all logs.
• Check the console for debug messages by ngx-page-scroll like
  • "Scrolling not possible, as we can't get any closer to the destination" The scroll position is as close to the scroll target as possible already.
  • "Scrolling not possible, as we can't find the specified target": The specified target element could not be found in the current DOM structure. Maybe it has been detached or removed using *ngIf?
• Investigate whether the correct scrollview is used. Based on the HTML and CSS setup the body-element which is used by default might not be the correct one.

Scrolling stops after short distance

• Please look at the browser's developer tool console for possible warnings or errors. NgxPageScroll by default prints warnings when the angular app is running developer mode.
• Check whether you are using the css property scroll-behavior with a value of smooth. This is by default included in common CSS frameworks like Bootstrap. Override the value to the standard of auto. (refer issue #434)

Is it possible to use the route feature for scrolling with the PageScrollService?

It is not possible to use the route detection feature for scrolling with the PageScrollService. The route detection feature is only available to the pageScroll directive to simplify the usage on e.g. menus of single-page applications.

To trigger an animation that uses the PageScrollService as soon as new route has been loaded, use the OnInit lifecycle hook to start the scroll animation. You may use route queryParams to provide additional information to the route's component to only trigger the scroll animation in certain situations.

<a [routerLink]="['/page']" [queryParams]="{scrollToSection: true}">link</a>

@Component({...})
class MyComponent implements OnInit {
  constructor(private route: ActivatedRoute) {
  }
  ngOnInit() {
    this.activeRoute.queryParams.subscribe(params => {
      if (params.scrollToSection){
         // Start scrolling here
      }
    });
  }
}

Read more about the routerLink directive and the activatedRoute at the official angular documentation.

Is it possible to detect the current scroll section?

Detecting the current scroll section is not possible with ngx-page-scroll. This library only manipulates the scroll position but does not perform any "read" actions of the current scroll position. Look for something like "scrollspy", for example by using the ngx-scrollspy project.

How to get scrolling work when using MatSidenav from @angular/material library?

The mat-sidenav introduces some new elements in the DOM hierarchy which are not present while editing your applications html. This prevents it from adding an id attribute to them to refer to them when creating a new PageScrollInstance. Refer to this example plunkr for a working example: https://plnkr.co/edit/mmBS1AZv7Jd7eCTrFCOZ?p=preview (refer to #104)

How does this speed option work?

The pageScrollSpeed option can be used to produce scroll animations that scroll with a given speed (distance per time interval) no matter how far away the scroll target is. When only using the pageScrollDuration option small distance scroll animations where unreasonable slow while long distance animations where extremely fast.

The pageScrollSpeed option uses the calculated scroll distance to determine the perfect scroll duration that would result in the specified speed for a linear scroll animation. This means: when performing a scroll animation with a speed of 500 and a linear easing function, every second 500 pixel will be scrolled.

As the calculated duration is used to perform the actual scroll animation it is possible to use custom easing functions together with the pageScrollSpeed option. However, the easing function of course manipulates the scroll position, resulting in only the average speed matching the specified speed. Example: Take a scroll animation with speed of 500px/s and an easeOutQuint easing function. In the first half of the scroll animation the number of pixels scrolled will be greater than the specified 500px/s, in the second half it will be less. On average it will be 500px/s.

Incorrect scroll position with nested scrolling

For nested scrolling (inline scrolling) the scrollTarget element's offsetTop is used to determine the necessary scroll distance (offsetLeft respectively for horizontal scrolling). This property returns the position of the scrollTarget relative to the next parent element in the DOM view hierarchy with css-position: relative. Based on your page structure and CSS there might be relatively positioned elements inside the scrollView. The following example showcases this:

<div class="scrollView">
  ...
  <div style="position: relative;">
    <h2 id="scrollTarget">Scroll here</h2>
    ...
  </div>
  ...
</div>

To properly get the correct scroll distance in these situations, ngx-page-scroll library offers an optional advanced offset calculation setting advancedInlineOffsetCalculation. When enabled (true) it traverses the DOM hierarchy to detect the relatively positioned parents and consider them for the offset calculation.

this.pageScrollService.create({
  ...
  advancedInlineOffsetCalculation: true
});