CODEWITHSUNDEEP
angular
Stefan Falk
Stefan Falk

Reputation: 25367

window.scrollTo has no effect

I am having an animation which enlages a card inside a list. It's basically a "fullscreen" animtion. Anyway, everything works so far. The only missing piece is scrolling the list item to the corrent position.

For this I am getting the y-offset of the host element and call window.scrollTo() but it has no effect: 

animationDone(event) {
  window.scrollTo(0, this.host.nativeElement.getBoundingClientRect().top);
}

So, I am not very well educated on this topic but I do not know which element in the DOM window actually represents or how scrollTo is managed (if this is delegated to the scrollable div of the current page).

Here is a small example of how the page looks like:

<!-- The scrollable content container -->
<div class="content-container">

   <!-- The list items -->

   <div *ngFor="let element of elements>
      <div [@fullscreenAnimation] (@fullscreenAnimation)="animationDone($event)">
          <list-card [data]="element"></list-card>
      </div>
   </div>

</div>

Upvotes: 0

Views: 384

Answers (1)

Dan Patil
Dan Patil

Reputation: 801

I don't know what exactly you are trying to do here but you can try this solution Give an element ID reference in HTML

and in your typescript function do this

 document.getElementById('yourHTMLElementID').scrollIntoView({
          behavior: 'smooth'
     })

Upvotes: 2

Related Questions