[Layout] NbLayoutScrollService code example request

[denisobrienirl]

Issue type

I'm submitting a ... (check one with "x")

• [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"

[nnixaa]

Hi @denisobrienirl, could you please elaborate on what is not working? Is there any error?

[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,

[craigsimko]

@denisobrienirl Did you ever get this working?

[SnorreDanielsen]

I am also struggling with this service.

I am inside a component that is nested some levels down inside a Nebular Layout. There I have the following code:

constructor(private nbLayoutScrollService: NbLayoutScrollService) {  }

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

But I get no console.logs as I am scrolling.

I also tried to use: this.nbLayoutScrollService.scrollTo(0, 0); It does not do anything.

I also tried to use: this.nbLayoutScrollService.getPosition().subscribe(r => console.log(r)); It gives an initial console.log of "{x: 0, y: 0}", but no further values when I am scrolling.

[RoWEN-FCUB]

This worked for me:

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