[Layout] NbLayoutScrollService code example request

Issue type

I’m submitting a … (check one with “x”)

• feature request

Issue description

Current behavior: NbLayoutScrollService documentation is really dry.

Expected behavior: Some code examples would be much appreciated.

Steps to reproduce:

• open https://akveo.github.io/nebular/docs/services/layoutscrollservice#nblayoutscrollservice

Related code: I attempted to figure out how it work, but for a newbie it’s a bit too much without a guidance. Here is what i thought should work.

ngAfterViewChecked(): void {
    function getOffset(el) {
      const rect = el.getBoundingClientRect();
      return {
        left: rect.left + window.scrollX,
        top: rect.top + window.scrollY
      };
    }
    try {
      const pageElement = document.getElementById(this.fragment);
      if (pageElement) {
        this.scrollService.scrollTo(getOffset(pageElement).left, getOffset(pageElement).top);
        this.fragment = '';
      }
    } catch (e) { }
  }

Angular, Nebular

"@angular/core": "6.0.3"
"@nebular/auth": "^2.0.0-rc.10"
"@nebular/security": "^2.0.0-rc.10"
"@nebular/theme": "^2.0.0-rc.10"

[denisobrienirl]

Hi @nnixaa , Maybe i’m conceptually wrong here. My understanding is that this service allows for a page scroll similar to scrollIntoView() function. I’m looking for an alternative to this function as its following usage doesn’t work in Safari:

document.querySelector('#' + this.fragment).scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });

So, i was looking for some example of NbLayoutScrollService usage, just to see how the service should be used. With the code i provided in the original post i get no errors, just no scroll happens.

Hope this makes sense. Let me know if you need more info.

Cheers,

[RoWEN-FCUB]

This worked for me:

this.nbLayoutScrollService.onScroll().subscribe(r => {
      this.nbLayoutScrollService.getPosition().subscribe(p => console.log(p));
    });