Cant have two containers scroll at once

[skyleguy]

My view consists of a list of options on the left in its own container which can scroll vertically, and then a document on the right that can also be scrolled vertically. When clicking on an item in the left list i want the list item to be scrolled to, and i want the document to scroll to the position in the document where the list item is contained. However it seems that only one can happen at a time. If i set a timeout on one, the one that starts immediately will stop when the timeout is reached, and the other instance starts scrolling.

I am using this library like so:

  @ViewChild('leftBox', { read: ElementRef })
  leftBox: ElementRef;

  public scrollTo(selector: string): void {
    if (this.leftBox) {
      const pageScrollInstance: PageScrollInstance = new PageScrollInstance({
        document: this.document,
        scrollTarget: `${selector}`,
        scrollViews: [this.leftBox.nativeElement],
        scrollOffset: this.scrollToSnippetScrollOffset,
        duration: this.scrollToSnippetDuration
      });
      this.pageScrollService.start(pageScrollInstance);
    }
  }

and then the exact same thing from a separate component for rightBox. It would be great if both scrolls could happen at once. OR it would be nice if the pageScrollService would emit when it is done scrolling so i know a safe time to start the other scroll.

[Nolanus]

Hi @skyleguy,

by default only one view can be scrolled. In case another view scrolling is triggered, all running scroll animations will be stopped. This for example prevents accidentally having two scroll animations to run at the same time and interfere each other.

To be able to run multiple scroll animations at the same time, take a look the "namespaces": https://github.com/Nolanus/ngx-page-scroll/blob/master/src/app/namespace-scroll/namespace-scroll.component.ts#L70

By default all scroll animations run in the same namespace. When a new scroll animation is started, all running scroll animations in the same namespace will be stopped. In case to have multiple scroll animations run at the same time, declare a custom namespace for one of them.

this.pageScrollService.scroll({
      document: this.document,
      duration: 10000,
      namespace: 'customSpace',
      scrollTarget: '#scrollTarget3',
      scrollViews: [this.container3.nativeElement],
    });

An example can be seen on the "namespace feature" tab in the demo application at https://nolanus.github.io/ngx-page-scroll

[skyleguy]

perfect, that is exactly what i was looking for. Thank you!