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 ng2-page-scroll like "Scrolling not possible, as we can't get any closer to the destination" or "Scrolling not possible, as we can't find the specified target".
• Investigate whether the correct scrollview is used. Based on the HTML and CSS setup the body might not be the correct one.

Is it possible to use 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(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 ng2-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" or "bootstrap affix". There's a PR waiting for ng2-bootstrap or check out the ng2-scrollspy project.

Incorrect scroll position with nested scrolling

For nested scrolling (inline scrolling) the scrollTarget elements 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 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, ng2-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.

PageScrollInstance.newInstance({
  ...
  advancedInlineOffsetCalculation: true
});