Scroll to child div not working.

[shaharyar123]

trafficstars

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

i was trying to add scroll to the child-div (code below) but it wasn't working, rater then it scroll to the top of the window.

......
......
<div class="row">
  <div class="back-ground-body col-lg-12">
    <div class="row">
                                          // scroll here  //
      <div  #newStepRef id="new-step" class=" col-lg-10 offset-lg-1 new-step-section">
      </div>
    </div>
  </div>
</div>    

but when i changed the reference to main-div, it starts working fine.

......
......
<div #newStepRef class="row">       // changed the reference of the div
  <div class="back-ground-body col-lg-12">
    <div class="row">
                                          // scroll here  //
      <div   id="new-step" class=" col-lg-10 offset-lg-1 new-step-section">
      </div>
    </div>
  </div>
</div>    

[lppedd]

I'm not a Javascript expert, but it seems the problem is here https://github.com/nicky-lenaers/ngx-scroll-to/blob/62baea0c2c0e60480bdbb23f4b472fbe45741f2b/src/app/modules/scroll-to/scroll-to.service.ts#L109

basically if the direct parent is body the offset from the top is obviously calculated right. If it's not the body I see strange values.

[romelgomez]

What? version that have support for angular 7, don't have this bug;

Don't work:

<button [ngx-scroll-to]="'#benefits'" mat-button>Benefits </button>


<div id="benefits" ... 

[mrtpain]

@nicky-lenaers Any updates on this? Currently having to hack the offset option to get this working with repeated over columns....

[romelgomez]

An simplified version of this, I found this answer in stackoverflow https://stackoverflow.com/a/51400379/2513972

As workaround and for my use case, I create an service to keep the reference of the element that I need to scroll, mostly because if I need change of view, and scroll to...

<div #benefits >
<div #toolbar >

// direct call
<button (click)="scrollToElement('toolbar');" >GO</button>

Component

@ViewChild('benefits') public benefits: Element;

// If the references are in the same view, save it in the service.  
ngOnInit () {
    this.scrollService.elements['benefits'] = this.benefits;
    this.scrollService.elements['plans'] = this.plans;
}

// If the references are in the other view, or parent view, And we need to scroll to the top
ngAfterViewInit () {
  this.scrollService.scrollToElement(this.scrollService.elements['toolbar'].nativeElement);
}

// direct call
scrollToElement (refElementName: string) {
  this.scrollService.scrollToElement(this.scrollService.elements[refElementName].nativeElement);
}

Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ScrollService {

  public elements = {};

  constructor() { }

  public scrollToElement($element: Element): void {
    $element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
  }

}

Using this path, your have to look for view life cycle hooks to gain full control.

[richie50]

I'm not a Javascript expert, but it seems the problem is here ngx-scroll-to/src/app/modules/scroll-to/scroll-to.service.ts

Line 109 in 62baea0

to = isWindow(listenerTarget) ? targetNode.offsetTop : targetNode.getBoundingClientRect().top; basically if the direct parent is body the offset from the top is obviously calculated right. If it's not the body I see strange values.

isWindow returns false even though we are in the current target.

[robbertvancaem]

Hey @shaharyar123, do you have a running example that I can have a look at? :-)